web-dev-qa-db-fra.com

Modification de la couleur / du remplissage du polygone google-maps en un clic

J'ai le code suivant qui m'a été transmis et crée des polygones:

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

Le code utilise data.js, qui ressemble beaucoup à ceci:

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

Actuellement, les polygones sont créés à l'aide d'un contour et d'un remplissage rouges. Je voudrais ajouter un comportement pour que lorsque l'utilisateur clique sur un polygone, le polygone devienne "actif" et le contour et le remplissage deviennent jaunes.

Je ne suis pas très bon en javascript, et je ne sais pas comment procéder. Je sais que je dois ajouter un écouteur pour "cliquer", mais au-delà, je suis bloqué. Une aide serait très appréciée! MTIA.

javascriptgoogle-mapsgoogle-maps-api-3
28
circey

Je pense que vous devez passer à l'objet polygone un nouveau PolygonOptions en appelant cette méthode:

setOptions(options:PolygonOptions).

Vous pouvez voir les différentes options ici: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions

Dans ce PolygonOptions, vous pouvez alors spécifier la couleur avec laquelle vous voulez que le Polygon soit rempli avec toutes les autres choses que vous pourriez vouloir changer.

31
Kasper Vesth

Kaspar Vesth est presque là. Oui, vous devez appeler setOptions. Mais gardez à l'esprit que vous n'avez pas à passer toutes les options à chaque fois, il suffit de ne passer que celles que vous souhaitez modifier. Par exemple.:

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