Question

所有代码完全来自http://apneadiving.github.io/

这是我的HTML

<div style='width: 800px;'>
  <div id="one_marker" style='width: 800px; height: 400px;'></div>
</div>
<div id='sidebar_container'>
</div>

这是我的javascript：

function createSidebarLi(json){
  return ("<li><a>" + json.name + "</a></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('#sidebar_container');
    bindLiToMarker($li, json.marker);
  });
};

handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'sidebar_builder'}}, function(){
  var json_array = [
    { lat: 40, lng: -80, name: 'Foo', infowindow: "I'm Foo" },
    { lat: 45, lng: -90, name: 'Bar', infowindow: "I'm Bar" },
    { lat: 50, lng: -85, name: 'Baz', infowindow: "I'm Baz" }
  ];

  var markers = handler.addMarkers(json_array);

  _.each(json_array, function(json, index){
    json.marker = markers[index];
  });

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

我收到的错误是：

Cannot read property 'offsetWidth' of null

我也尝试过：

function initialize() {
  function createSidebarLi(json){
    return ("<li><a>" + json.name + "</a></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('#sidebar_container');
      bindLiToMarker($li, json.marker);
    });
  };

  handler = Gmaps.build('Google');
  handler.buildMap({ internal: {id: 'sidebar_builder'}}, function(){
    var json_array = [
      { lat: 40, lng: -80, name: 'Foo', infowindow: "I'm Foo" },
      { lat: 45, lng: -90, name: 'Bar', infowindow: "I'm Bar" },
      { lat: 50, lng: -85, name: 'Baz', infowindow: "I'm Baz" }
    ];

    var markers = handler.addMarkers(json_array);

    _.each(json_array, function(json, index){
      json.marker = markers[index];
    });

    createSidebar(json_array);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
}
google.maps.event.addDomListener(window, "load", initialize);

Answer 1

我基本上需要在HTML

中将one_marker更改为sidebar_builder

<div>
  <div id="sidebar_builder" style="height:400px;"></div>
</div>
<div id='sidebar_container'>
</div>

无法读取null gmaps4rails侧栏示例的属性'offsetWidth'

1 个答案: