Googleマップでスタイルを定義できません。ポリゴン

Question

データレイヤーにポリゴンを追加しようとしています。私は彼らが持っているべき色を定義しました。私の問題は、それぞれの色を設定できないということですが、スタイルを設定すると、グローバルスタイルのようになります。

マイJS FIDDLE

私は、ランダムな色で、同様に試してみました：私は違うと一意である各矩形の（塗りつぶしの色）のスタイルを定義することができ

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 6, 
    center: {lat: -34.872, lng: 155.252}, 
    }); 

    var innerCoords1 = [ 
    {lat: -33.364, lng: 154.207}, 
    {lat: -34.364, lng: 154.207}, 
    {lat: -34.364, lng: 155.207}, 
    {lat: -33.364, lng: 155.207} 
    ]; 

    var innerCoords2 = [ 
    {lat: -33.364, lng: 156.207}, 
    {lat: -34.364, lng: 156.207}, 
    {lat: -34.364, lng: 157.207}, 
    {lat: -33.364, lng: 157.207} 
    ]; 
    var innerCoords3 = [ 
    {lat: -33.979, lng: 157.987}, 
    {lat: -34.979, lng: 157.987}, 
    {lat: -34.979, lng: 158.987}, 
    {lat: -33.979, lng: 158.987} 
    ]; 

    map.data.add({geometry: new google.maps.Data.Polygon([innerCoords1, 
                 innerCoords2, 
                 innerCoords3])}); 
     map.data.setStyle(function(feature) {return {fillColor: getRandomColor(),strokeWeight: 5}})                        
} 

function getRandomColor() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 

どのように、誰かが私を助けてくださいことができますか？

Answer 1

getRandomColor機能は1回だけ呼び出されるため、異なる色を表示しません。私が各ポリゴンにIDとインデックスを割り当てて、その配列に基づいて配列を作ると、色が違ってきます（実際にはランダムな色を必要としないと仮定します）。

var colorArray = ["#FF0000", "#00FF00", "#0000FF"]; 
map.data.setStyle(function(feature) { 
    var color = colorArray[feature.getId()]; 
    return { 
    fillColor: color, 
    strokeWeight: 5 
    } 
}); 

私は（返さスタイルの外）上記と同じそれを呼び出す場合、それは私のための作業を行います。

map.data.setStyle(function(feature) { 
    var color = getRandomColor(); 
    return { 
    fillColor: color, 
    strokeWeight: 5 
    } 
}); 

proof of concept fiddle

コードスニペット：

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 6, 
 
    center: { 
 
     lat: -34.872, 
 
     lng: 155.252 
 
    }, 
 
    }); 
 

 
    var innerCoords1 = [{ 
 
    lat: -33.364, 
 
    lng: 154.207 
 
    }, { 
 
    lat: -34.364, 
 
    lng: 154.207 
 
    }, { 
 
    lat: -34.364, 
 
    lng: 155.207 
 
    }, { 
 
    lat: -33.364, 
 
    lng: 155.207 
 
    }]; 
 

 
    var innerCoords2 = [{ 
 
    lat: -33.364, 
 
    lng: 156.207 
 
    }, { 
 
    lat: -34.364, 
 
    lng: 156.207 
 
    }, { 
 
    lat: -34.364, 
 
    lng: 157.207 
 
    }, { 
 
    lat: -33.364, 
 
    lng: 157.207 
 
    }]; 
 
    var innerCoords3 = [{ 
 
    lat: -33.979, 
 
    lng: 157.987 
 
    }, { 
 
    lat: -34.979, 
 
    lng: 157.987 
 
    }, { 
 
    lat: -34.979, 
 
    lng: 158.987 
 
    }, { 
 
    lat: -33.979, 
 
    lng: 158.987 
 
    }]; 
 

 
    map.data.add({ 
 
    id: 0, 
 
    geometry: new google.maps.Data.Polygon([innerCoords1]) 
 
    }); 
 
    map.data.add({ 
 
    id: 1, 
 
    geometry: new google.maps.Data.Polygon([innerCoords2]) 
 
    }); 
 
    map.data.add({ 
 
    id: 2, 
 
    geometry: new google.maps.Data.Polygon([innerCoords3]) 
 
    }); 
 
    var colorArray = ["#FF0000", "#00FF00", "#0000FF"]; 
 
    map.data.setStyle(function(feature) { 
 
    var color = colorArray[feature.getId()]; 
 
    return { 
 
     fillColor: color, 
 
     strokeWeight: 5 
 
    } 
 
    }); 
 
} 
 

 
function getRandomColor() { 
 
    var letters = 'ABCDEF'; 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
    color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    console.log(color); 
 
    return color; 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>