更改Google Maps多边形的颜色/点击填充 [英] Changing google-maps polygon color/fill on click

问题描述

我有以下代码已传递给我并创建多边形:

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>

代码使用data.js，看起来很像这样:

The code uses data.js, which looks a lot like this:

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.

我不太擅长javascript，并且不确定如何进行此操作.我知道我需要为点击"添加一个侦听器，但是除此之外，我还遇到了麻烦.协助将不胜感激！ MTIA.

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.

推荐答案

我认为您必须通过调用以下方法将新的PolygonOptions传递给多边形对象:

I think you have to pass to the polygon object a new PolygonOptions by calling this method:

setOptions(options:PolygonOptions).

您可以在此处看到不同的选项: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

You can see the different options here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

然后在此PolygonOptions中，可以指定要填充Polygon的颜色以及所有其他可能要更改的内容.

In this PolygonOptions you can then specify the color you want the Polygon to be filled with along with all the other stuff you could want to change.

这篇关于更改Google Maps多边形的颜色/点击填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！