Question

我正在尝试使用gmaps4rails获取此行为：用户将鼠标悬停在侧边栏中的框中（标记所在的建筑物的图片），地图上的相应标记会更改图像/颜色以便选择一个从其他人中脱颖而出。

我知道rails中等，但我真的很喜欢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)
  )
  }
}

但我不知道将它放在我的应用程序中的位置或如何将其与侧边栏中的项目相关联。

很抱歉提出这样一个基本问题。请帮帮忙？

Answer 1

我有完全相同的问题，这是我的（部分）解决方案：

假设您已经设置了像youtube视频上显示的rails应用程序（链接到github页面https://github.com/apneadiving/Google-Maps-for-Rails）。

将marker.json（{：id =＆gt; location.id}）添加到控制器中，使其最终结果如下：

@hash = Gmaps4rails.build_markers(@locations) do |location, marker|
  marker.lat location.latitude
  marker.lng location.longitude
  marker.infowindow "$#{location.suggested_price}, #{location.address}"
  marker.json({ :id => location.id })
end

然后，在javascript下构建地图的视图中，添加一个.each函数，遍历每个json并在视图中为其对应的类添加功能（我假设你正在包装你的每一个带有div的侧边栏项目，名为“location-＆lt;％= location.id％＆gt;”：

handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } });
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){

  markers = handler.addMarkers(<%=raw @hash.to_json %>);

  _.each(<%=raw @hash.to_json %>, function(json, index){
    json.marker = markers[index];
    $(".location-" + json.id).on('mouseover', function() {
      handler.getMap().setZoom(14);
      json.marker.setMap(handler.getMap()); //because clusterer removes map property from marker
      json.marker.panTo();
      google.maps.event.trigger(json.marker.getServiceObject(), 'click');
    });
    });
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
  handler.getMap().setCenter(new google.maps.LatLng(<%= @city.latitude %>, <%= @city.longitude %>));
  handler.getMap().setZoom(14);
});

我从一个apneadiving的例子中偷走了这个（并且删除了所有漂亮的重构）。

现在，在我的例子中，我不是改变标记的颜色，而是将地图对准相应的标记并打开信息窗。您所要做的就是将函数中的代码更改为您想要的任何行为，替换此部分：

      handler.getMap().setZoom(14);
      json.marker.setMap(handler.getMap()); //because clusterer removes map property from marker
      json.marker.panTo();
      google.maps.event.trigger(json.marker.getServiceObject(), 'click');

希望有所帮助！

将鼠标悬停在侧边栏中的项目上时，gmaps4rails会更改标记颜色

1 个答案: