我正在编写一个应用程序，该应用程序使用手工构建的框架异步加载 Google 地图。
当我加载地图时，由于某种原因它不会加载所有地图，最终我会得到一个Uncaught TypeError: undefined is not a function. 我检查了 chrome 检查器，发现它google.maps是一个有效的对象，但它没有自己的属性。我在文档加载后手动调用“初始化函数”。我究竟做错了什么？！
Async Google Maps API v3 undefined 不是一个函数
IT技术
javascript
google-maps-api-3
asynchronous
2021-01-15 09:41:34
1个回答
您无法使用众所周知的 URL ( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )异步加载地图 API
当您查看脚本文件时，您会看到，这不是加载的 API，而是加载 API 的加载器。加载器使用document.write()，在加载文档后调用时会导致意外结果。
此外，文档的 onload-event 不会等待异步加载的对象，它可能来得太快。
你也不能使用脚本的加载事件来调用初始化函数，因为当它触发时，加载器被加载，而不是地图 API。
怎么做：
将回调参数附加到脚本 URL（以初始化函数的名称作为值）
http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize
现在你得到一个不同的加载器：
- 不使用
document.write() - 加载地图 API 时调用回调函数（初始化）
演示：http : //jsfiddle.net/doktormolle/7cu2F/
与评论相关：似乎回调必须是直接附加到窗口的函数。不酷的谷歌:)
还有另一种选择，即支持使用函数引用（而不是函数名）的 google-API-loader。
示例，它异步加载 maps-API，但仅当map-canvas文档中存在具有 ID 的元素时，然后创建地图：
window.addEventListener('load',function(){
if(document.getElementById('map-canvas')){
google.load("maps", "3",{
callback:function(){
new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0,0),
zoom: 3
});
}
});
}
},false); body,html,#map-canvas{
height:100%;
margin:0;
padding:0;
width:100%;
}<script src="https://www.google.com/jsapi?.js"></script>
<div id="map-canvas"></div>