Gmaps4rails：当用户单击侧边栏中的链接时如何更改标记的外观？

Question

我正在尝试使用 gmaps4rails 获得这种行为： 用户点击侧边栏中的链接，地图上的相应标记会改变图像/颜色，以使所选的一个脱颖而出。

我已尝试使用此代码

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 的标记

• 换个头像

Answer 2

我用这段代码让它工作了：

Gmaps.map.callback = function(e){
        var len = Gmaps.map.markers.length;
        var markers = Gmaps.map.markers;
        for(var i = 0; i < len; i++){
            m = Gmaps.map.markers[i];
            google.maps.event.addListener(m.serviceObject, 'click',
                (function(m, markers){
                    return function(){
                        for(a in markers){
                            markers[a].serviceObject.setIcon("/assets/marker_sprite.png");
                        }
                        m.serviceObject.setIcon("/assets/marker_sprite2.png");
                    }
                }(m, markers))
            )
        }
    }

我们为每个标记添加了一个点击监听器，并将标记本身传递给这个监听器函数。我还传入整个标记数组以在每次单击时将它们全部重置，然后使我感兴趣的那个脱颖而出。这是简单的版本，我的最终版本是这样的：

 Gmaps.map.callback = function(){
        var len = Gmaps.map.markers.length;
        var markers = Gmaps.map.markers;
        var anchor = new google.maps.Point(9.5, 34);
        var sAnchor = new google.maps.Point(0, 34);
        var origin = new google.maps.Point(0, 0);
        var sOrigin = new google.maps.Point(28.5, 0);
        var size = new google.maps.Size(28.5,34);

        var markerNormal = new google.maps.MarkerImage("/assets/marker_sprite.png", size, origin, anchor);
        var markerHighlight = new google.maps.MarkerImage("/assets/marker_sprite_bleu.png", size, origin, anchor);
        var shadow = new google.maps.MarkerImage("/assets/marker_sprite.png", size, sOrigin, sAnchor);
        for(var i = 0; i < len; i++){
            m = Gmaps.map.markers[i];
            google.maps.event.addListener(m.serviceObject, 'click',
                (function(m, markers){
                    return function(){
                        console.log(m);
                        for(a in markers){
                            markers[a].serviceObject.setIcon(markerNormal);
                            markers[a].serviceObject.setZIndex(1);
                            markers[a].serviceObject.shadow = shadow;
                        }
                        Gmaps.map.map.setZoom(7);
                        m.serviceObject.setZIndex(99);
                        m.serviceObject.setIcon(markerHighlight);
                    }
                }(m, markers))
            )
        }
    }    

如果您发现任何可以改进的地方，请随时发表评论:)