更改谷歌，地图多边形颜色/填充上点击

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]; 

当前，多边形是使用红色轮廓和填充创建的。我想添加一个行为，以便当用户单击多边形时，多边形变为“活动”，轮廓和填充变为黄色。

我不擅长JavaScript，我不知道如何去做这件事。我知道我需要为'点击'添加一个侦听器，但除此之外，我被卡住了。援助将不胜感激！ MTIA。

Answer 1

我认为你必须传递给多边形对象一个新的PolygonOptions通过调用这个方法：

setOptions(options:PolygonOptions). 

你可以看到不同的选择在这里：http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

在这个PolygonOptions，那么你可以指定你想要Polygon的颜色以及其他所有你想要改变的东西。

Answer 2

Kaspar Vesth几乎在那里。是的，你必须调用setOptions。但请记住，您不必每次都通过所有选项，只需传入您想要更改的选项即可。例如：

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