关于javascript：Google MAP API未捕获TypeError：无法读取null的属性’offsetWidth’


Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

我正在尝试使用以下代码使用Google MAP API v3。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Topology

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

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

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

Uncaught TypeError: Cannot read property 'offsetWidth' of null

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

你有什么线索吗？

此问题通常是由于在运行需要访问它的javascript之前未映射map div。

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

请注意，正如matthewsheets所指出的那样，这也可能是因为你的HTML中根本不存在id的div(div的病理情况没有被渲染)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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);
相关讨论

对于可能仍然存在此问题的其他人，即使在尝试上述建议之后，在初始化函数中使用错误的选择器作为地图画布也会导致同样的问题，因为该函数试图访问不存在的内容。仔细检查您的地图ID是否与您的初始化函数匹配，并且您的HTML或同样的错误可能会被抛出。

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

相关讨论

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

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

相关讨论

一年，geocodezip的答案是正确的。
所以改变你的代码是这样的：
(如果你仍然遇到麻烦，或者将来可能还有其他人)

1
2
3
4
5
6
7
8
9
10
11
12
13
<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);
相关讨论

就这样，我添加了失败的场景，让它发挥作用。我有一个，我在其中加载地图：

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

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

1
2
3
4
#map {
    width: 500px;
    height: 300px;
}

一切正常！希望这有助于某人。

相关讨论

对于可能仍然存在这个问题的更多其他人，我使用了一个自动关闭的标签，而第二个div没有显示，并且似乎没有在dom中。一旦我将它改为两个打开和关闭标签就可以了。心连心

我的单引号

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

并用双引号替换它们

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

这对我有用。

还要注意不要写

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

正确：

1
google.maps.event.addDomListener(window,"load", init)
相关讨论

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

另外，请确保您没有在选择器中放置哈希符号(＃)

1
2
3
    document.getElementById('#map') // bad

    document.getElementById('map') // good

声明。这不是一个jQuery。快速提醒一下匆忙的人。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[...]

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);
}

[...]
相关讨论

为了解决这个问题，您需要将async defer添加到脚本中。

它应该是这样的：

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

在这里看到async defer的含义。

由于您将从主js文件调用函数，因此您还需要确保它位于加载主脚本的函数之后。

  • 在HTML中设置ng-init = init()

  • 并在控制器中

    使用$ scope.init = function(){...}
    而不是google.maps.event.addDomListener(窗口，"加载"，初始化){...}

希望这会帮助你。

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

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

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

例如：

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

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

1
2
3
4
5
6
7
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
     }
}

在我正在处理的情况下，地图div有条件地呈现，具体取决于该位置是否被公开。如果您无法确定地图canvas div是否在页面上，只需检查您的document.getElementById是否正在返回一个元素，并且只有在它出现时才调用该地图：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">
      #map_canvas {
              width:300px;
            height:300px;
     }

   // 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);

就我而言，使用defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script解决了这些问题。

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

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

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

这样做很好。