0

我使用gmap4rails v2withrails 4.1而不是infoboxes一次加载所有内容，这非常低效，我只想在marker单击该标记后加载特定信息框的内容。我想出了以下选择标记。

markers = handler.addMarkers(<%= raw(@hash.to_json) %>);
        _.each(markers, function(marker){
          google.maps.event.addListener(handler.getMap(), 'click', function(){
            marker.infowindow();
          });
        });

但我不确定如何向我的用户表发送查询以获取所需的属性，例如User.name，User.photo将在infobox.

完整的 gmaps 处理程序在这里：

var handler = Gmaps.build('Google', { markers: { maxRandomDistance: null, clusterer: undefined } }),


  maxZoom = 14;


  handler.buildMap({ 
     provider: {
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false,
      doClustering: false,
      minZoom: 5  
    },
    internal: {id: 'big_map'}}, 
    function(){

    markers = handler.addMarkers(<%= raw(@hash.to_json) %>);
    _.each(markers, function(marker){
      google.maps.event.addListener(handler.getMap(), 'click', function(){
        marker.infowindow();
      });
    });
    handler.map.centerOn([$("#big_map").data("lat"),$("#big_map").data("lng")]);
    handler.getMap().setZoom(15);
    //handler.bounds.extendWith(markers);
    //handler.fitMapToBounds();
  });

加载标记信息的控制器：

return Gmaps4rails.build_markers(profiles) do |profile, marker|
  marker.lat profile.latitude
  marker.lng profile.longitude
  marker.json({ :id => profile.profile_code })
  # this is how I loaded all markers before: marker.infowindow render_to_string(partial: "info_window", locals: { profile: profile })
  marker.picture({
    url: view_context.image_path( "marker-#{ (profile == current_user.profile) ? 'green' : 'blue' }.png"),
    width:  32,
    height: 32
  })
end

有什么方法可以infowindow()像在原始标记加载中那样向函数发送部分内容，如下所示？如果是这样，我将如何将其发送user.id到部分（在我的情况下profile.profile_code，我将每个设置marker.id为等于我认为的值。

更新：

好的，我现在意识到我需要向服务器发出请求，这是 javascript 无法做到的，所以我将尝试使用 ajax

markers = handler.addMarkers(<%= raw(@hash.to_json) %>);
_.each(markers, function(marker){
  google.maps.event.addListener(handler.getMap(), 'click', function(){
    var infowindow = marker.infowindow;
    $.post('<%= load_info_box_url %>', {
    }, function(data){
      infowindow.html(data).name %>)
      infowindow.open(Gmaps.map.map, marker);
    });
  });
});

然后创建一个 load_info_box 路由，然后在控制器中请求必要的数据，将 html 发送回数据！

4

2 回答 2

1

检查这个 plunkr

基本上：

  • 我创建了一个自定义构建器

  • 利用下划线 js 模板。

因此，您的 json 必须包含必要的键，但 infowindow html 仅按需构建

于 2014-06-27T10:06:36.697 回答
0

@apneadiving 有一个很好的答案，但我发现在 javascript 模板中实现链接、条件和样式有点困难，所以我最终使用了 ajax 方法。

javascript:

markers = handler.addMarkers(data.markers);
        _.each(markers, function(json, index){
          json.marker = markers[index]; 
          google.maps.event.addListener(json.marker.getServiceObject(), 'click', function(){
            var infowindow = json.marker.infowindow;

            $.post('<%= load_infobox_url %>', {
              marker_id: data.markers[index].id
            }, function(data){
              infowindow.setContent(data.html);
              infowindow.open(map, google.maps.markers[index]);
            });

          });
        });

路线

post '/load_infobox', to: 'requests#load_infobox', as: 'load_infobox'

控制器动作：

def load_infobox
    profile = Profile.find_by(profile_code: params[:marker_id])
    render json: { html: render_to_string(partial: "info_window", locals: { profile: profile }) }
  end
于 2014-06-28T13:12:56.787 回答