0

私は with を使用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 を data に送り返します!

4

2 に答える 2

1

このplunkrをチェックしてください

基本的：

  • カスタム ビルダーを作成します

  • アンダースコア js テンプレートを活用します。

したがって、json には必要なキーが含まれている必要がありますが、infowindow html はオンデマンドでのみ構築されます。

于 2014-06-27T10:06:36.697 に答える