原始编辑的帖子

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>

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

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

我不知道，因为我遵循this tutorial中给出的指示。

你有任何线索吗？

Answer 1

这个问题通常是由于在运行需要访问它的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>

Answer 2

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

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

Answer 3

google在示例中使用id="map_canvas"和id="map-canvas"，仔细检查并重新检查ID：D

Answer 4

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

Answer 5

如果您未在地图选项中指定package com.mkyong.file; import java.io.File; public class apples { public static void main(String[] args) { try { File file = new File("C:\Users\Felix\Desktop\cmploop.png"); if (file.delete()) { System.out.println(file.getName() + " is deleted!"); } else { System.out.println("Delete operation is failed."); } } catch(Exception e) { e.printStackTrace(); } } }或center，也会收到此错误。

Answer 6

就这样，我添加了失败的方案来实现这一点。我有<div id="map>我在其中加载地图：

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

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

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

一切顺利！希望这有助于某人。

Answer 7

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

Answer 8

我的

中有单引号

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

并用双引号替换它们

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

这对我有用。

Answer 9

另外注意不要写

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

正确的：

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

Answer 10

从＆＃34; map-canvas＆＃34;更改ID（在所有3个地方）到＆＃34;地图＆＃34;为我修好了，即使我已经确定ID是相同的，div有宽度和高度，并且代码在窗口加载调用之后才运行。它不是破折号;它似乎不适用于任何其他ID而不是＆＃34; map＆＃34;。

Answer 11

另外，请确保您没有在选择器中将哈希符号（＃）放在

中

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

    document.getElementById('map') // good

语句。这不是一个jQuery。只是快速提醒某人匆忙。

Answer 12

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

Answer 13

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

[...]

Answer 14

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

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

Answer 15

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

应该是这样的：

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

请参阅here async defer的含义。

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

Answer 16

在HTML中设置ng-init = init（）
在控制器中

使用$ scope.init = function（）{...} 而不是google.maps.event.addDomListener（窗口，“加载”，初始化）{...}

希望这会对你有所帮助。

Answer 17

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

例如：

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

Answer 18

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

Answer 19

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

Answer 20

在我的情况下，使用defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script

解决了这类问题

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

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

Answer 21

检查您是否未覆盖window.self

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

Answer 22

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

原始编辑的帖子

在跟随this blog post时使用ReactJS时也出现此错误。 sahat的评论here有帮助 - 请参阅下面sahat评论的内容。

❗️React的注意事项＆gt; = 0.9

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

换句话说，在最新版本的React中用this.getDOMNode（）替换rootNode参数。

Answer 23

我的失败是使用

zoom

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

private ContactPoint2D[] contacts = new ContactPoint2D[2];

void OnTriggerEnter2D(Collider2D other)
{
    if (other.tag == "boundary")
    {
        other.GetContacts(contacts);

        Vector2 normal = contacts[0].normal;

        movement = Vector2.Reflect(movement, normal);
    }
}

Answer 24

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

Answer 25

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

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

Answer 26

此问题是没有YourIonicApp.xcodeproj参数的API链接：

key

这种方式很好。

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

26 个答案:

原始编辑的帖子