GoogleMap offsetWidth 问题答案

【问题标题】：GoogleMap offsetWidth problemGoogleMap offsetWidth 问题
【发布时间】：2011-11-09 02:12:55
【问题描述】：

我在显示 GoogleMap 时遇到问题。

这里是网站源码：http://pastebin.com/LjhVbEF7

当我试图运行这个网站时，地图没有显示。 Firebug 控制台显示Uncaught TypeError: Cannot read property 'offsetWidth' of null

你知道我做错了什么吗？我知道网上有很多工作示例，但是这段代码是由一个特殊的脚本生成的，我无法过多地干扰它。也许我忘了设置一些变量？

谢谢，迈克

===================

编辑： 只有当我将 JS 放入函数定义中并在 body onload 参数中调用它时，此代码才有效。您知道如何在不使用此类功能和 onload 参数的情况下使其正常工作吗？

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

不确定，但可能是这一行

map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));

我认为new google.maps.LatLng 只需要两个属性，纬度和经度。

从地图站点试试这个位

var latlng = new google.maps.LatLng(-34.397, 150.644);

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

【讨论】：

不是这样，但我发现了新事物。请检查主帖中的编辑:)

【解决方案2】：

我意识到这可能有点晚了 - 但希望它能够帮助其他人：

在您的情况下，初始化函数没有触发，尽管它也可能是由于未在容器 div 上设置宽度和高度属性引起的。如果您不想简单地将 load 事件添加到 body 标签，可以使用以下 jQuery：

//Add onload to body
$(window).load(function(){
    initialize()
});

【讨论】：

如果您使用的是单页应用程序，还有什么替代方案？
我想你只需要在你使用的部分完全加载后调用初始化。

【解决方案3】：

尝试将 JavaScript 代码放在 body 和 AFTER div id="map_canvas"

类似这样的：

<body>
    <div id="map_canvas"></div>

    <script type="text/javascript">
        var map_4e60b1f9c94ae = new google.maps.Map(document.getElementById("map_canvas"), {"mapTypeId":"roadmap","zoom":10});
        map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));
    </script>
</body>

【讨论】：

【解决方案4】：

你可能在 AngularJS 中工作吗？我是，这个问题在上述所有解决方案之后仍然存在。原因是我的地图 div 所在的部分没有及时完成，因此 div 为空，因此出现错误。

在此处查看调用 GoogleMaps 的 Angular 方式：

Initialize Google Map in AngularJS

【讨论】：

【解决方案5】：

这是因为您的脚本在加载 DOM 元素之前运行。一个简单的解决方案是将其放入一个函数中，并在加载完成时触发它。请参考以下问题：

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

【讨论】：

【解决方案6】：

大多数时候我收到此错误只是因为我在 getElementById 中引用的元素不在页面上，或者我使用了错误的 ID。明显的错误，但请务必在深入研究更高级的解决方案之前仔细检查。

【讨论】：