Javascript 单击更改google maps多边形颜色/填充
我有以下代码,已传递给我并创建多边形:Javascript 单击更改google maps多边形颜色/填充,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有以下代码,已传递给我并创建多边形: <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 }
<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>
当前,多边形是使用红色轮廓和填充创建的。我想添加一个行为,以便当用户单击多边形时,多边形变为“活动”,轮廓和填充变为黄色
我不擅长javascript,也不知道该怎么做。我知道我需要为“click”添加一个侦听器,但除此之外,我还被卡住了。非常感谢您的帮助!MTIA。我认为您必须通过调用以下方法向多边形对象传递一个新的
polygonooptions
:
setOptions(options:PolygonOptions).
您可以在此处看到不同的选项:
在这个
PolygonOptions
中,您可以指定要填充Polygon
的颜色,以及您想要更改的所有其他内容。Kaspar Vesth就快到了。是的,你必须呼叫setOptions。但请记住,您不必每次都传入所有选项,只传入您想要更改的选项就足够了。例如:
myPolygon.setOptions({strokeWeight: 2.0, fillColor: 'green'});
// polygon is clicked
myPolygon.setOptions({strokeWeight: 6.0});
我们可以把填充颜色作为渐变色吗?Thanks@FarzadCyrus:没有。fillColor只接受CSS颜色。看看PolygonOptions谢谢:)但我以前看过这一页,但是仍然想知道一些混合移动应用程序是如何使用渐变的,这些应用程序实际上是用前端技术构建的,比如HTML5/CSS3/JS,其中包括谷歌地图。。。干杯
myPolygon.setOptions({strokeWeight: 2.0, fillColor: 'green'});
// polygon is clicked
myPolygon.setOptions({strokeWeight: 6.0});