谷歌MAP API未捕获的类型错误:无法读取属性“offsetWidth”为空

我试图使用下面的代码使用谷歌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”为空

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

你有什么线索吗?

当前回答

在map API键调用的开始添加async defer。

2018-11-29 21:21:41

其他回答

谷歌在样例中使用id="map_canvas"和id="map-canvas"，反复检查id:D

2014-01-21 07:59:40

如果你没有在地图选项中指定居中或缩放，你也会得到这个错误。

2015-08-21 14:10:52

我的失败是没有使用

zoomLevel

作为一种选择，而不是正确的选择

zoom

2018-03-21 03:37:34

如果在循环中创建多个映射，如果单个映射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);
}

[...]

2015-09-24 23:03:14

这是对之前删除的帖子的编辑，以包含链接的答案的内容，在答案本身。重新发布这个答案的目的是作为React 0.9+用户的一个PSA，他们也遇到了这个问题。

编辑原文

在使用ReactJS时也得到了这个错误，同时遵循这篇博客文章。萨哈特的评论在这里有所帮助请看下面sahat的评论内容。

❗️注意React >= 0.9 在v0.9之前，DOM节点是作为最后一个参数传入的。如果您正在使用它，您仍然可以通过调用this. getdomnode()访问DOM节点。换句话说，在React的最新版本中，用this.getDOMNode()替换rootNode参数。

2017-08-25 01:15:23

谷歌MAP API未捕获的类型错误:无法读取属性“offsetWidth”为空

推荐文章

最新文章

标签