Javascript 单击更改谷歌地图多边形颜色/填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5932710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing google-maps polygon color/fill on click
提问by circey
I have the following code which has been passed on to me and creates polygons:
我有以下代码已传递给我并创建多边形：
<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>
The code uses data.js, which looks a lot like this:
代码使用了 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];
Currently, the polygons are created using a red outline and fill. I would like to add a behavior so that when the user clicks on a polygon, the polygon becomes "active" and the outline and fill become yellow.
目前，多边形是使用红色轮廓和填充创建的。我想添加一个行为，以便当用户单击多边形时，多边形变为“活动”并且轮廓和填充变为黄色。
I'm not great at javascript, and am not sure how to go about this. I know I need to add a listener for 'click', but beyond that I'm stuck. Assistance would be much appreciated! MTIA.
我不擅长 javascript，我不知道如何去做。我知道我需要为“点击”添加一个监听器，但除此之外我被卡住了。将不胜感激！MTIA。
回答by thomax
Kaspar Vesth is almost there. Yes, you have to call setOptions. But keep in mind that you don't have to pass in all the options every time, it's enough to pass in only the ones you want to change. E.g.:
Kaspar Vesth 快到了。是的，您必须调用 setOptions。但是请记住，您不必每次都传入所有选项，只需传入您想要更改的选项即可。例如：
myPolygon.setOptions({strokeWeight: 2.0, fillColor: 'green'});
// polygon is clicked
myPolygon.setOptions({strokeWeight: 6.0});
回答by Kasper Vesth
I think you have to pass to the polygon object a new PolygonOptionsby calling this method:
我认为您必须PolygonOptions通过调用此方法将新的多边形对象传递给：
setOptions(options:PolygonOptions).
You can see the different options here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions
您可以在此处查看不同的选项：http: //code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions
In this PolygonOptionsyou can then specify the color you want the Polygonto be filled with along with all the other stuff you could want to change.
在这里，PolygonOptions您可以指定要Polygon填充的颜色以及您可能想要更改的所有其他内容。
