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

IT技术 javascript google-maps-api-3
2021-01-29 05:44:48

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

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

你有什么线索吗？

6个回答

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

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

请注意，正如matthewsheets所指出的，这也可能是由于 div 的 id 根本不存在于您的 HTML 中（未呈现 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>
当我忘记对我的地图脚本进行条件化时，这种情况一直发生在我身上。添加： var mapExists = document.getElementById("map-canvas"); if(mapExists) { // script } 让它变得更好。
2021-03-18 05:44:48

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

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

令人惊讶的是，您可以如此确定这不是问题……直到您仔细检查并意识到您在之前的测试中更改了它并忘记将其更改回来。:-)
2021-03-31 05:44:48

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

他们至少可以在控制台中记录一些消息，真的。谢谢！
2021-03-23 05:44:48
就是那个！从选项中删除了缩放，因为我稍后会在脚本中设置它，并且繁荣，地图将第一次加载，但第二次会产生该错误。谢谢！！
2021-04-02 05:44:48
是的，这是我的！有变焦但没有中心。只需添加中心即可修复它。
2021-04-05 05:44:48

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

年，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>
确切地说，首先呈现 html div，然后 JS 其他添加一个事件侦听器。
2021-03-27 05:44:48
其它你可能感兴趣的问题
上一篇从 Javascript 对象中选择随机属性 下一篇使用 JavaScript 获取下一个/上一个元素？