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

我正在尝试使用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)) ) } } 

发生的事情是我们为每个标记添加一个点击监听器，并将标记本身传递给该监听器function。 我还传入整个标记数组，在每次点击时重置它们，然后使我感兴趣的那个突出。 这是简单版本，我的最终版本给出了：

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

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