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 함수는 한 번만 호출되기 때문에 다른 색상을 제공하지 않습니다. 각 Polygon에 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>