Google MAP API未捕获TypeError：无法读取属性'offsetWidth'的null-Java 学习之路

191

我正在尝试使用以下代码使用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>

当我运行此代码时，浏览器会这样说 .

未捕获的TypeError：无法读取null的属性'offsetWidth'

我不知道，因为我按照this tutorial中的指示行事 .

你有什么线索吗？

25 回答

-2
如果您正在使用asp.net Webforms并使用母版页在页面后面的代码中注册脚本，请不要忘记使用map元素的clientID（vb.net）：
```
ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...
```
回复于 2024-05-09T18:03:42+08:00
305
此问题通常是由于在运行需要访问它的javascript之前未映射map 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>
```
回复于 2024-05-09T18:03:42+08:00
5

For others that might still be having this issue ，即使在尝试上述建议之后，在初始化函数中使用错误的 Map 画布选择器也会导致同样的问题，因为该函数正在尝试访问不存在的内容 . 仔细检查您的 Map ID是否与您的初始化函数匹配，您的HTML或同样的错误可能会被抛出 .

换句话说，请确保您的ID匹配 . ;）

回复于 2024-05-09T18:03:42+08:00
0

谷歌在样本中使用 id="map_canvas" 和 id="map-canvas" ，仔细检查并重新检查ID：D

回复于 2024-05-09T18:03:42+08:00

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

回复于 2024-05-09T18:03:42+08:00

0

如果未在 Map 选项中指定 center 或 zoom ，也可能会出现此错误 .

回复于 2024-05-09T18:03:42+08:00
3
就这样，我添加了失败的场景，让它发挥作用 . 我有一个 <div id="map> ，其中我正在加载 Map ：
```
var map = new google.maps.Map(document.getElementById("map"), myOptions);
```
而div最初是 hidden 而且它没有't have explicitly width and height values set so it'的大小是 width x 0 . 一旦我像这样在CSS中设置这个div的大小
```
#map {
    width: 500px;
    height: 300px;
}
```
一切正常！希望这有助于某人 .
回复于 2024-05-09T18:03:42+08:00
21

For even more others that might still be having this issue, 我正在使用一个自动关闭 <div id="map1" /> 标签，第二个div没有显示，似乎没有在dom中 . 一旦我将其更改为两个打开和关闭标签 <div id="map1"></div> 就可以了 . 心连心

回复于 2024-05-09T18:03:42+08:00

106

我的单引号

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

并用双引号替换它们

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

这对我有用 .

回复于 2024-05-09T18:03:42+08:00

7

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

回复于 2024-05-09T18:03:42+08:00

还要注意不要写

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

正确：

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

回复于 2024-05-09T18:03:42+08:00

6
另外，请确保您没有在选择器中放置哈希符号（＃）
```
document.getElementById('#map') // bad

    document.getElementById('map') // good
```
声明 . 这不是一个jQuery . 只是快速提醒某人匆忙 .
回复于 2024-05-09T18:03:42+08:00
1

我有同样的问题，但问题是缩放没有在给予谷歌 Map 的选项对象中定义 .

回复于 2024-05-09T18:03:42+08:00

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

[...]

回复于 2024-05-09T18:03:42+08:00

25
为了解决这个问题，您需要在脚本中添加 async defer .

它应该是这样的：
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
```
请参阅here async defer的含义 .

由于您将从主js文件调用函数，因此您还需要确保它位于加载主脚本的函数之后 .
回复于 2024-05-09T18:03:42+08:00
4
首次加载API时，请确保包含Places库 &libraries=places 参数 .

例如：
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
```
回复于 2024-05-09T18:03:42+08:00
2
我知道我有点迟到了，只是想补充一点，当页面中不存在div时也会发生错误 . 您还可以在加载Google Map 函数调用之前先检查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
     }
}
```
回复于 2024-05-09T18:03:42+08:00
1
- 在HTML中设置ng-init = init（）
- 并在控制器中
使用$ scope.init = function（）而不是google.maps.event.addDomListener（window，“load”，init）

希望这会帮助你 .
回复于 2024-05-09T18:03:42+08:00

实际上解决这个问题最简单的方法就是在你的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>

回复于 2024-05-09T18:03:42+08:00

9

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

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

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

回复于 2024-05-09T18:03:42+08:00
0

检查你是否没有覆盖 window.self

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

回复于 2024-05-09T18:03:42+08:00
1

这是对先前删除的帖子的编辑，以包含答案本身中链接答案的内容 . 重新发布此答案的目的是作为React 0.9用户的PSA，他们也偶然发现了这个问题 .

原创编辑的帖子

在遵循this blog post时使用ReactJS时也会出现此错误 . sahat的评论here帮助 - 请参阅下面sahat评论的内容 .

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

回复于 2024-05-09T18:03:42+08:00
1
我的失败是使用
```
zoomLevel
```
作为一种选择，而不是正确的选择
```
zoom
```
回复于 2024-05-09T18:03:42+08:00
23

在map api key call的开头添加async defer .

回复于 2024-05-09T18:03:42+08:00

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

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

这种方式很好 .

回复于 2024-05-09T18:03:42+08:00

Google MAP API未捕获TypeError：无法读取属性'offsetWidth'的null

25 回答

原创编辑的帖子

相关问题