javascript - Gmaps4rails : How to change appearance of marker when user clicks link in sidebar?

Question

我正在尝试使用 gmaps4rails 来实现此行为:用户单击侧栏中的链接， map 上相应的标记会更改图像/颜色，以使所选标记从其他标记中脱颖而出。

我尝试过这段代码

Gmaps.map.callback = function(){
        var len = Gmaps.map.markers.length;
        for(var i = 0; i < len; i++){
            marker = Gmaps.map.markers[i];
            google.maps.event.addListener(marker.serviceObject, 'click', (function(i){
                return function(){
                    console.log($(Gmaps.map.markers[i].serviceObject.ne.ga).attr("src", "/assets/marker_sprite2.png"));
                }
            })(i));
        }
    }

但这会改变每个标记的外观，这对于我想做的事情来说不是很有用!

有什么办法可以实现这个目标吗？

编辑:使其工作，请参阅下面的答案

编辑 2:虽然此解决方案满足了我的需求，但我偶然发现了此方法的另一个问题，请参阅下面的评论来回答

Answer 1

您遇到了 JavaScript 问题。实际上，您无法使用不断变化的计数器来创建闭包:它将始终以其最后一个值来引用。

Gmaps.map.callback = function(){
  for(var i = 0; i < Gmaps.map.markers.length; i++){
    marker = Gmaps.map.markers[i];
    google.maps.event.addListener(marker.serviceObject, 'click', 
      (function(marker){
        return function(){
         console.log($(marker.serviceObject.ne.ga).attr("src", "/assets/marker_sprite2.png"));
        }
      })(marker)
    )
  }
}

你的主要问题有点长，不复杂但是很长。想法如下:

• 为每个标记添加一个 id，您可以使用 to_gmaps4rails 方法的 block 参数并添加更多 json

• 自己创建侧边栏，并将 id 添加到每一行，以便在单击 li 时知道您想要哪个标记

• 循环所有标记以获取具有正确 ID 的标记

• 更改图片