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

Question

我研究了Google的地图类，并指出了我可以在所需位置设置标记的地方。 我想让图标在“鼠标事件”中动态更新

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

    var markers = [];
    var map;

对于标记，我使用以下功能。

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

放置标记可以正常工作，并且所有标记上的事件均会按预期触发，但是只有将图标从icon1.png更改为icon2.png才能在最后一个标记上起作用，并且事件与所有标记相关。 谁能告诉我我的思想错误在哪里？

Answer 1

Javascript没有块范围，但是有函数范围。 例：

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

变量marker_temp的作用域为setMarkers函数，而不是其他编程语言中常见的for -loop范围。

上面的功能与此相同（该过程称为hoisting ）：

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

这意味着当您执行此操作时：

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

调用setOptions ， marker_temp变量将是循环中最后设置的值。

要解决该问题，可以使用IIFE（中间调用的函数表达式），以便可以在该时间点捕获标记变量的值：

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

有关范围和吊装的更多信息，您可以阅读我写的一篇博客文章： https : //www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/

Answer 2

如果要设置许多事件侦听器，我发现编写一个createMarker函数以在事件侦听器的标记上保留函数闭包更为简单。 然后从循环内部调用它。 createMarker函数的一个示例：

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);
}

概念证明

代码段：

 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>