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

如果你看到任何可以改进的东西，请随意评论:)