javascript - Google MAP API 未捕获类型错误：无法读取 null 的属性“offsetWidth”

Question

我正在尝试将 Google 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>

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

未捕获的类型错误：无法读取 null 的属性“offsetWidth”

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

你有什么线索吗？

score 322 · Accepted Answer

此问题通常是由于在需要访问它的 javascript 运行之前未呈现地图 div。

您应该将初始化代码放在 onload 函数中或 HTML 文件的底部，就在标记之前，以便 DOM 在执行之前完全呈现（请注意，第二个选项对无效 HTML 更敏感）。

请注意，正如matthewsheets所指出的，这也可能是由于您的 HTML 中根本不存在该 id 的 div（未呈现 div 的病态情况）

从wf9a5m75的帖子中添加代码示例，将所有内容放在一个地方：

<script type="text/javascript">

function initialize() {
    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);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

score 109 · Accepted Answer

对于可能仍然存在此问题的其他人，即使在尝试了上述建议之后，在初始化函数中为您的地图画布使用不正确的选择器可能会导致与函数试图访问不存在的内容相同的问题。仔细检查您的地图 ID 是否与您的初始化函数和您的 HTML 匹配，否则可能会引发同样的错误。

换句话说，确保您的 ID 匹配。;)

score 36 · Accepted Answer

36

如果您未指定center或未zoom在地图选项中指定，您也可能会收到此错误。

于 2015-08-21T14:10:52.327 回答

score 26 · Accepted Answer

26

谷歌在示例中使用id="map_canvas"and id="map-canvas"，仔细检查并重新检查 id ：D

于 2014-01-21T07:59:40.860 回答

score 23 · Accepted Answer

年，geocodezip 的答案是正确的。因此，像这样更改您的代码：（如果您仍然遇到麻烦，或者将来可能会有其他人）

<script type="text/javascript">

function initialize() {
    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);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

score 11 · Accepted Answer

就这样我添加了我的失败场景以使其正常工作。我有一个<div id="map>我正在加载地图的地方：

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

并且 div 最初是隐藏的，并且没有明确设置宽度和高度值，因此它的大小为width x 0. 一旦我像这样在 CSS 中设置了这个 div 的大小

#map {
    width: 500px;
    height: 300px;
}

一切正常！希望这可以帮助某人。

score 7 · Accepted Answer

对于更多可能仍然存在此问题的其他人，我使用的是自关闭<div id="map1" />标签，而第二个 div 没有显示，并且似乎不在 dom 中。一旦我将其更改为两个打开和关闭标签<div id="map1"></div>，它就起作用了。hth

score 6 · Accepted Answer

我的单引号

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

并用双引号替换它们

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

这对我有用。

score 6 · Accepted Answer

还要注意不要写

google.maps.event.addDomListener(window, "load", init())

正确的：

google.maps.event.addDomListener(window, "load", init)

score 5 · Accepted Answer

将 ID（在所有 3 个位置）从“map-canvas”更改为“map”为我修复了它，即使我确保 ID 相同，div 有宽度和高度，而代码不是一直运行到窗口加载调用之后。这不是破折号。它似乎不适用于“地图”以外的任何其他 ID。

score 4 · Accepted Answer

另外，请确保您没有在选择器中放置井号 (#)

    document.getElementById('#map') // bad

    document.getElementById('map') // good

陈述。它不是一个 jQuery。只是对匆忙的人的快速提醒。

score 3 · Accepted Answer

3

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

于 2015-10-11T08:33:14.857 回答

score 2 · Accepted Answer

如果您在循环中创建多个地图，并且单个地图 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);
}

[...]

score 1 · Accepted Answer

如果您碰巧使用的是 asp.net Webforms，并且正在使用母版页在页面后面的代码中注册脚本，请不要忘记使用地图元素 (vb.net) 的 clientID：

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...

score 1 · Accepted Answer

为了解决它，您需要添加async defer到脚本中。

它应该是这样的：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

请参阅此处的异步延迟的含义。

由于您将从主 js 文件调用一个函数，因此您还需要确保这是在您加载主脚本的那个之后。

score 1 · Accepted Answer

在你的 HTML 中设置 ng-init=init()
并且在控制器中

使用 $scope.init = function() {...} 而不是 google.maps.event.addDomListener(window, "load", init){...}

希望这会帮助你。

score 1 · Accepted Answer

&libraries=places确保在首次加载 API 时包含 Places 库参数。

例如：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

score 1 · Accepted Answer

我知道我参加聚会有点晚了，只是想补充一点，当页面中不存在 div 时也会发生错误。您还可以在加载谷歌地图函数调用之前先检查 div 是否存在。就像是

function initMap() {
    if($("#venuemap").length != 0) {
        var city= {lat: -26.2041, lng: 28.0473};
        var map = new google.maps.Map(document.getElementById('venuemap'), {
       etc etc
     }
}

score 0 · Accepted Answer

实际上解决这个问题的最简单方法就是在 Javascript 代码对我有用之前移动你的对象。我猜你的答案对象是在javascript代码之后加载的。

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

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

<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>

score 0 · Accepted Answer

在我的情况下，这些问题是使用defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script解决的

<script src="<your file>.js" defer></script>

您需要考虑浏览器对此选项的支持（我没有看到问题）

score 0 · Accepted Answer

检查你没有覆盖window.self

我的问题：我创建了一个组件并写self = this而不是 var self = this。如果不使用关键字var，JS会将该变量放在窗口对象上，所以我覆盖window.self了导致此错误的原因。

score 0 · Accepted Answer

这是对先前删除的帖子的编辑，以在答案本身中包含链接答案的内容。重新发布此答案的目的是为也偶然发现此问题的 React 0.9+ 用户充当 PSA。

原始编辑帖子

在关注此博客文章时使用 ReactJS 时也出现此错误。sahat 的评论在这里有所帮助 - 请参阅下面的 sahat 评论的内容。

❗️ React >= 0.9 的注意事项

在 v0.9 之前，DOM 节点作为最后一个参数传入。如果你使用这个，你仍然可以通过调用 this.getDOMNode() 来访问 DOM 节点。

也就是说，在最新版本的 React 中将 rootNode 参数替换为 this.getDOMNode() 。

score 0 · Accepted Answer

0

我的失败是使用

zoomLevel

作为一个选项，而不是正确的选项

zoom

于 2018-03-21T03:37:34.073 回答

score 0 · Accepted Answer

0

在 map api 键调用开始时添加异步延迟。

于 2018-11-29T21:21:41.970 回答

score 0 · Accepted Answer

在我处理的一个案例中，地图 div 会根据位置是否被公开而有条件地呈现。如果您不能确定地图画布 div 是否会出现在页面上，只需检查您document.getElementById是否正在返回一个元素，并且仅在地图存在时才调用它：

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

score -2 · Accepted Answer

这里的问题是没有参数的 API 链接key：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

这种方式工作得很好。

javascript - Google MAP API 未捕获类型错误：无法读取 null 的属性“offsetWidth”

26 回答 26

原始编辑帖子

Related

Reference