Question

我将gmap4rails v2与rails 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发送回数据！

Answer 1

Check this plunkr

基本上：

我创建了一个自定义构建器
利用下划线js模板。

所以你的json必须包含必要的键，但infowindow html只能按需构建

Answer 2

@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

gmap4rails仅在单击标记时加载并添加信息框

2 个答案: