변경 구글 -지도 다각형 색상/클릭

Question

에 기입 나는이 나에게 전달하고 폴리곤 생성 된 다음 코드를 다음과 같이 많이 보이는

<script type="text/javascript"> 

var map; 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-36.42,145.710); 
    var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Create polygon overlays from site data in file data.js included above 
    // Overlays are defined by a set of coordinates 
    // We will also be setting up an infowindow with the site name 
    // The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well 
    var overlay; 
    var number_of_overlays = 29; 

    for (var k = 0; k < number_of_overlays; k++) { 
     var pk = primaryKeys[k]; 
     var verticesArray = new Array((eval("siteVertices_" + pk).length)/2); 
     var m = 0; 
     var centroidLat = 0; 
     var centroidLng = 0; 

     for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2) 
     { 
      verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]); 
      m = m + 1; 
      centroidLat += eval("siteVertices_" + pk)[n]; 
      centroidLng += eval("siteVertices_" + pk)[n + 1]; 
     } 

     var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m); 

     var overlay = new google.maps.Polygon({ 
      paths: verticesArray, 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.5, 
      strokeWeight: 1, 
      fillColor: "#FF0000", 
      fillOpacity: 0.20, 
      position: cent, 
      map:map }); 

     attachInfoWindow(overlay, k); 
    } 
} 

function attachInfoWindow(overlay, number) { 
    var infowindow = new google.maps.InfoWindow({ content: siteNames[number] }); 
    google.maps.event.addListener(overlay, 'mouseover', function() { infowindow.open(map, overlay); }); 
    google.maps.event.addListener(overlay, 'mouseout', function() { infowindow.close(map, overlay); }); 
} 
</script> 

코드는 data.js를 사용을 :

var primaryKeys = [1, 2, 3]; 

var siteNames = ['area_1', 'area_2', 'area_3']; 

var siteVertices_1 = [-36.42716187286321, 145.7040742777405, -36.426678448311414, 145.70408500657655, -36.42786542285944, 145.70926703439332, -36.428335891385544, 145.70912755952455]; 
var siteVertices_2 = [-36.42664391787113, 145.70415474401094, -36.42616912275949, 145.70439077840425, -36.42733884002687, 145.70942796693421, -36.427804995502726, 145.70927239881135]; 
var siteVertices_3 = [-36.42611732675347, 145.7044176004944, -36.42570295746138, 145.70467509255982, -36.42684246769319, 145.70961035714723, -36.42730862614943, 145.7094601534424]; 

현재 폴리곤은 빨간색 외곽선을 사용하여 작성되고 채워집니다. 사용자가 다각형을 클릭하면 다각형이 "활성"이되고 윤곽선과 채우기가 노란색이되도록 동작을 추가하고 싶습니다.

저는 자바 스크립트에서는별로 좋지 않습니다.이 문제를 어떻게 해결해야할지 모르겠습니다. 나는 '클릭'에 대한 청취자를 추가해야한다는 것을 알고 있지만 그 이상으로 저는 붙어 있습니다. 도움을 많이 주시면 감사하겠습니다! MTIA.

Answer 1

나는이 방법을 호출하여 새 PolygonOptions 객체 다각형에 전달할 생각 :

setOptions(options:PolygonOptions). 

당신은 다른 여기에 옵션을 볼 수 있습니다 당신은 다음을 지정할 수 있습니다이 PolygonOptions에서 http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

당신이 바꿀 수있는 다른 것들과 함께 Polygon이 채워지 길 바란다.

Answer 2

거의 Kaspar Vesth가 있습니다. 예, setOptions를 호출해야합니다. 그러나 매번 모든 옵션을 전달할 필요는 없으며 변경하려는 항목 만 전달하면 충분합니다. 예 :

myPolygon.setOptions({strokeWeight: 2.0, fillColor: 'green'}); 
// polygon is clicked 
myPolygon.setOptions({strokeWeight: 6.0});