我试图使用下面的代码使用谷歌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>

当我运行这段代码时,浏览器会这样说。

无法读取属性“offsetWidth”为空

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

你有什么线索吗?


当前回答

如果你没有在地图选项中指定居中或缩放,你也会得到这个错误。

其他回答

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

应该是这样的:

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

在这里可以看到async defer的含义。

因为你将从主js文件中调用一个函数,你还想确保它在你加载主脚本的那个文件之后。

我在我的

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

然后用双引号代替

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

这招对我很管用。

在HTML中设置ng-init=init() 在控制器中 使用美元的范围。Init = function(){…} 而不是google。maps。event。addDomListener(window, "load", init){…}

希望这对你有所帮助。

如果你没有在地图选项中指定居中或缩放,你也会得到这个错误。

我的失败是没有使用

zoomLevel

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

zoom