0

我正在尝试使用 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：虽然此解决方案适用于我想要的，但我偶然发现了此方法的另一个问题，请参阅下面的评论以回答

4

2 回答 2

2

你有一个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 的标记

  • 改变它的图片

于 2012-09-11T13:57:15.787 回答
0

我使它与这段代码一起工作：

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

如果您看到任何可以改进的地方，请随时发表评论：）

于 2012-09-12T12:48:23.580 回答