标记谷歌地图的动态图标更改答案

【问题标题】：dynamic icon change for markers google maps标记谷歌地图的动态图标更改
【发布时间】：2016-04-20 09:48:49
【问题描述】：

我研究了 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 才能在最后一个标记上使用与所有标记相关的事件。谁能告诉我我的想法哪里出错了？

【问题讨论】：

addListener 必须设置为映射而不是标记

标签： javascript google-maps

【解决方案1】：

Javascript 没有块作用域，而是函数作用域。示例：

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

变量marker_temp 的作用域是函数setMarkers，而不是像其他编程语言中常见的for-循环。

上面的功能和这个是一样的（过程叫做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/

【讨论】：

您好，感谢您的回复。看来我需要学习一点。我将阅读有关提升的内容，然后回到我试图实现的目标。 :) 谢谢
抱歉，我在脚本中有一些错误。请查看更新后的答案
嗨，谢谢。似乎开始工作了，但现在点击后的标记从一个位置移动到另一个位置（光标宽度），所有点击后
您好，再次抱歉由于形状功能造成的错误，删除后效果很好:) 再次感谢您的帮助
很高兴能提供帮助。如果对您有帮助，请点赞/接受答案

【解决方案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);
}

proof of concept fiddle

代码 sn-p：

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>

【讨论】：