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

如果您发现任何可以改进的内容，请随时发表评论：）

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

2 个答案: