我试图使用下面的代码使用谷歌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”为空
我不知道，因为我遵循本教程中给出的方向。
你有什么线索吗?
这个问题通常是由于地图div在需要访问它的javascript运行之前没有被渲染。
您应该将初始化代码放在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>
Year, 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>
