我试图使用下面的代码使用谷歌MAP API v3。

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }
</style>

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

当我运行这段代码时,浏览器会这样说。

无法读取属性“offsetWidth”为空

我不知道,因为我遵循本教程中给出的方向。

你有什么线索吗?


当前回答

如果在循环中创建多个映射,如果单个映射DOM元素不存在,则会破坏所有映射。首先,在创建新的Map对象之前,检查以确保DOM元素存在。

[...]

for( var i = 0; i <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( 'map' + '-' + i.toString() );

  // Element doesn't exist, don't create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

其他回答

在我处理的一个案例中,地图div是有条件地呈现的,这取决于位置是否被公开。如果你不能确定是否地图画布div将在页面上,只需检查你的文档。getElementById返回一个元素,只在它存在时调用映射:

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

我在我的

var map = new google.maps.Map( document.getElementById('map_canvas') );

然后用双引号代替

var map = new google.maps.Map( document.getElementById("map_canvas") );

这招对我很管用。

检查你没有重写window.self

我的问题:我创建了一个组件,并写了self = this而不是var self = this。如果你不使用关键字var, JS会把这个变量放在window对象上,所以我覆盖了window。导致此错误的Self。

如果在循环中创建多个映射,如果单个映射DOM元素不存在,则会破坏所有映射。首先,在创建新的Map对象之前,检查以确保DOM元素存在。

[...]

for( var i = 0; i <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( 'map' + '-' + i.toString() );

  // Element doesn't exist, don't create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

我有同样的问题,但问题是,缩放没有在给谷歌地图的选项对象内定义。