动态图标更改标记谷歌地图 [英] dynamic icon change for markers google maps

问题描述

我已经研究了Google的地图课程，并指出了我可以在需要的位置设置标记。我想让图标在鼠标事件上动态更新

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

让标记正常工作并发生事件所有这些都是按预期触发的，但只有将图标从icon1.png更改为icon2.png才能在最后一个标记上进行操作，并且所有事件都与它们相关。任何人都可以告诉我我的想法在哪里出错？

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 ?

推荐答案

Javascript没有块范围，但功能范围。例子：

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

变量 marker_temp 是作用域为 setMarkers ，而不是像 -loop中的，这在其他编程语言中很常见。

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

当您调用 setOptions 时， marker_temp 变量将是循环中上次设置的值。

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

为了避免这个问题，您可以使用IIFE立即调用函数表达式），以便您可以在该时间点捕获标记变量的值：

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

有关范围和提升的更多信息，可以阅读我写的关于此的博文： https://www.kenneth-truyers.net/2013/04/20 / javascript-hoisting-explained /

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/

这篇关于动态图标更改标记谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！