Google MAP API未捕获的TypeError:无法读取null的属性“ offsetWidth”

2020/10/16 10:21 · javascript ·  · 0评论

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

我不知道,因为我遵循了本教程中给出的指导

你有什么线索吗?

此问题通常是由于在需要访问JavaScript的javascript运行之前未渲染map div引起的。

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

请注意,正如matthewsheets所指出的,这也可能是由div导致的,该div在您的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>

对于可能仍然存在此问题的其他用户,即使尝试了上述建议,在初始化函数中为地图画布使用不正确的选择器也会导致此问题,因为该函数试图访问的对象不存在。仔细检查您的地图ID是否与您的Initialize函数匹配,以及您的HTML还是可能引发此错误。

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

如果未指定centerzoom在地图选项中也可能会收到此错误

谷歌使用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>

只是为了在工作中添加失败场景。<div id="map>在其中加载地图:

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

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

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

一切正常!希望这对某人有帮助。

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

还注意不要写

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

正确:

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

我的单引号中

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

并用双引号代替

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

这帮了我大忙。

将ID(在所有3个地方)从“ map-canvas”更改为“ map”,即使我已确定ID相同,div的宽度和高度以及代码也不是,但对我来说固定了它运行直到窗口加载调用之后。这不是破折号;除“地图”外,它似乎与其他ID均不兼容。

另外,请确保未在选择器中的列表中放置井号(#)

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

    document.getElementById('map') // good

声明。它不是jQuery。只是一个快速提醒的人。

我遇到了同样的问题,但问题是在给Google Maps的options对象中未定义缩放。

如果要在循环中创建多个地图,则如果不存在单个地图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);
}

[...]

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

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

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

应该是这样的:

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

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

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

确保您包含地方信息库 &libraries=places首次加载API时,参数。

例如:

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

我知道我参加聚会有点晚了,只是想补充一点,当页面中不存在div时也会发生错误。您还可以在加载google maps函数调用之前先检查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
     }
}
  • 在HTML中设置ng-init = init()
  • 并在控制器中

    使用$ scope.init = function(){...}代替google.maps.event.addDomListener(window,“ load”,init){...}

希望这会帮助你。

实际上最简单的解决方法是在Java代码对我起作用之前移动对象。我猜你的答案对象是在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>

就我而言,这类问题可以通过https://developer.mozilla.org/en/docs/Web/HTML/Element/script解决defer

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

不过,您需要考虑浏览器对此选项的支持(我还没有发现问题)

检查您没有覆盖 window.self

我的问题:我创建了一个组件,然后编写了self = this而不是var self = this如果不使用关键字var,则JS会将变量放在窗口对象上,因此我重写window.self了导致此错误的内容。

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

原始编辑帖子


在遵循此博客文章的同时使用ReactJS时也遇到此错误sahat的评论在这里有所帮助-请在下面查看sahat的评论内容。

ReactReact> = 0.9的注意事项

在v0.9之前,将DOM节点作为最后一个参数传入。如果使用此方法,则仍可以通过调用this.getDOMNode()访问DOM节点。

换句话说,在最新版本的React中,用this.getDOMNode()替换rootNode参数。

我的失败是使用

zoomLevel

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

zoom

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

在我正在处理的情况下,有条件地渲染了地图div,具体取决于该位置是否公开。如果您不确定地图画布div是否会出现在页面上,只需检查您document.getElementById是否正在返回一个元素,并仅在存在地图时调用该地图:

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

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

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

这样很好。

本文地址:http://javascript.askforanswer.com/google-map-apiweibuhuodetypeerrorwufaduqunulldeshuxing-offsetwidth.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!