标记Google地图的动态图标更改

Question

I have studied the map class from Google and got to point where I'm able to set markers on locations I want. I wanted to have icons dynamically updated on "mouse events"

    var neighborhoods = [
    [54.50266744485844,  18.540940856933616],
    [54.49848076437959,  18.540254211425804],
    [54.49190082846816, 18.518968200683616],
    [54.4040671009359,  18.608918762207054],
    ];

    var markers = [];
    var map;

And for to put markers I use function as below.

     function setMarkers(map) {

      var image = {
      url: '/images/icon1.png',
   anchor: new google.maps.Point(0, 32)
   };
    var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };


    for (var i = 0; i < neighborhoods.length; i++) 
       {
        var neighborhood = neighborhoods[i];
        var marker_temp = new google.maps.Marker
        ({
        position: {lat: neighborhood[0], lng: neighborhood[1]},
        map: map,
        icon: image,
        shape: shape,
        title: "",
        visible:true,
        zIndex: 3
        });
        marker_temp.addListener('mouseover', function() 
        { 
        marker_temp.setOptions({icon: "/images/icon1.png"});
        });

        marker_temp.addListener('mouseout',  function() 
        { 
        marker_temp.setOptions({icon: "/images/icon2.png"});    
        });

        marker_temp.addListener('click',  function() 
        { 
        marker_temp.setOptions({icon: "/images/icon1.png"});
        });


    markers.push(marker_temp);
}// end of for loop ----------------------------------------------------

     }// --- end of set markers function --------------------------------

Putting markers works fine and events on all of them are triggered as expected but only change of the icon from icon1.png to icon2.png works on last marker with events related to all fo them. Can anyone tell me where is error in my thinking ?

Answer 1

Javascript does not have block scope, but function scope. Example:

function setMarkers(map) {
....
   for (var i = 0; i < neighborhoods.length; i++) 
   {
    ....
    var marker_temp = new google.maps.Marker
    ....
   }
}

The variable marker_temp is scoped to the function setMarkers , not to the for -loop as is usual in other programming languages.

The above is functionally the same as this (the process is called hoisting ):

function setMarkers(map) {
    var marker_temp;
    ....
    for (var i = 0; i < neighborhoods.length; i++) 
    {
     ....
     marker_temp = new google.maps.Marker
     ....
   }
}

That means that when you do this:

marker_temp.addListener('click',  function() 
{ 
    marker_temp.setOptions({icon: "/images/icon1.png"});
});

When you call setOptions , the marker_temp variable will be the value that was last set in the loop.

To circumvent the problem you can use an IIFE (inmediately invoked function expression) so you can capture the value of marker variable at that point in time:

 marker_temp.addListener('click',  (function(theMarker) 
 { 
    return function(){
        theMarker.setOptions({icon: "/images/icon1.png"});
    }
 })(marker_temp));

For more information about scope and hoisting you can read a blog post I wrote about this: https://www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/

Answer 2

If you are going to set a number of event listeners, I find it simpler to write a createMarker function to hold function closure on the marker for the event listeners. Then call that from inside the loop. One example of a createMarker function:

function createMarker(neighborhood, idx, bounds, map) {
  var image = {
    url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
    anchor: new google.maps.Point(16, 32)
  };
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  var marker_temp = new google.maps.Marker({
    position: {
      lat: neighborhood[0],
      lng: neighborhood[1]
    },
    map: map,
    icon: image,
    shape: shape,
    title: "" + idx,
    visible: true,
    // zIndex: 3
  });
  bounds.extend(marker_temp.getPosition());

  marker_temp.addListener('mouseover', function() {
    marker_temp.setOptions({
      icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png",
      anchor: new google.maps.Point(16, 32)
    });
  });

  marker_temp.addListener('mouseout', function() {
    marker_temp.setOptions({
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
      anchor: new google.maps.Point(16, 32)
    });
  });

  marker_temp.addListener('click', function() {
    marker_temp.setOptions({
      icon: "http://maps.google.com/mapfiles/ms/micons/orange.png",
      anchor: new google.maps.Point(16, 32)
    });
  });
  markers.push(marker_temp);
}

proof of concept fiddle

code snippet:

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); setMarkers(map); } google.maps.event.addDomListener(window, "load", initialize); function setMarkers(map) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < neighborhoods.length; i++) { var neighborhood = neighborhoods[i]; createMarker(neighborhood, i, bounds, map); } // end of for loop -------------------------------------- map.fitBounds(bounds); } // --- end of set markers function ------------------------ function createMarker(neighborhood, idx, bounds, map) { var image = { url: 'http://maps.google.com/mapfiles/ms/micons/blue.png', anchor: new google.maps.Point(16, 32) }; var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; var marker_temp = new google.maps.Marker({ position: { lat: neighborhood[0], lng: neighborhood[1] }, map: map, icon: image, shape: shape, title: "" + idx, visible: true, // zIndex: 3 }); bounds.extend(marker_temp.getPosition()); marker_temp.addListener('mouseover', function() { marker_temp.setOptions({ icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png", anchor: new google.maps.Point(16, 32) }); }); marker_temp.addListener('mouseout', function() { marker_temp.setOptions({ icon: "http://maps.google.com/mapfiles/ms/micons/green.png", anchor: new google.maps.Point(16, 32) }); }); marker_temp.addListener('click', function() { marker_temp.setOptions({ icon: "http://maps.google.com/mapfiles/ms/micons/orange.png", anchor: new google.maps.Point(16, 32) }); }); markers.push(marker_temp); } var neighborhoods = [ [54.50266744485844, 18.540940856933616], [54.49848076437959, 18.540254211425804], [54.49190082846816, 18.518968200683616], [54.4040671009359, 18.608918762207054], ]; var markers = []; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>