【问题标题】:gmaps4rails v2 - customize sidebargmaps4rails v2 - 自定义侧边栏
【发布时间】:2014-05-30 01:59:53
【问题描述】:

我使用 gmaps4rails 在地图上显示标记,并且我有一个侧边栏女巫允许我选择一个标记并在我的地图上打开它。

侧边栏很好用,但我想自定义它。

知道我知道:

<script type="text/javascript">

  $(document).ready(function(){
    var raw_markers = <%=raw @hash.to_json %>;

    function createSidebarLi(json){
      return ("<li>" + json.titre + ' ' + json.address + "</li>");
    };

    function bindLiToMarker($li, marker){
      $li.on('click', function(){
        handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        google.maps.event.trigger(marker.getServiceObject(), 'click');
      });
    };

    function createSidebar(json_array){
      _.each(json_array, function(json){
        var $li = $( createSidebarLi(json) );
        $li.appendTo('#markers_list');
        bindLiToMarker($li, json.marker);
      });
    };

    handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} });
    handler.buildMap({ internal: {id: 'map'}}, function(){

      var markers = handler.addMarkers(raw_markers);

      _.each(raw_markers, function(json, index){
        var marker = markers[index];
        json.marker = marker;
        google.maps.event.addListener(handler.getMap(), "click", function(){
          infoWindow.close();
        });
        google.maps.event.addListener(marker.getServiceObject(), 'mouseover', function(){
          google.maps.event.trigger(marker.getServiceObject(), 'click');
        });
      });


      createSidebar(raw_markers);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
    });

  });

</script>

我想创建一个部分并显示它而不是仅仅:

return ("<li>" + json.titre + ' ' + json.address + "</li>");

在我的部分,我想和我的自定义信息窗口一样。

在我的控制器中,我使用:

marker.infowindow render_to_string(:partial => "/properties/infowindow", :locals => { :property => property})

有没有办法用侧边栏做到这一点?我曾经用 gmaps4rails v1 做“marker.sidebar render_to_string”,但它不再起作用了。

【问题讨论】:

    标签: gmaps4rails


    【解决方案1】:

    它只是 javascript。

    首先,在您生成 json 的控制器中提供数据(我假设您使用内置的 json 生成器):

    marker.json({
      sidebar: render_to_string(:partial => "/properties/infowindow", :locals => { :property => property})
    })
    

    然后显示它:

    function createSidebarLi(json){
      return json.sidebar;
    };
    

    【讨论】: