我正在尝试将 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>
当我运行这段代码时,浏览器会这样说。
未捕获的类型错误:无法读取 null 的属性“offsetWidth”
我不知道,因为我遵循本教程中给出的方向。
你有什么线索吗?
此问题通常是由于在需要访问它的 javascript 运行之前未呈现地图 div。
您应该将初始化代码放在 onload 函数中或 HTML 文件的底部,就在标记之前,以便 DOM 在执行之前完全呈现(请注意,第二个选项对无效 HTML 更敏感)。
请注意,正如指出的,这也可能是由于您的HTML 中根本不存在该 id 的 div(未呈现 div 的病态情况)
添加代码示例,将所有内容放在一个地方:
<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>