我正在编写一个应用程序,它使用手动构建的框架异步加载 Google map 。
当我加载 map 时,由于某种原因,它不会加载全部 map ,我最终会得到 Uncaught TypeError: undefined is not a function
。我检查了 chrome 检查器并发现 google.maps
是一个有效的对象,但它没有自己的属性。我在文档加载后手动调用“初始化函数”。我做错了什么?!
最佳答案
您无法使用众所周知的 URL ( http://maps.googleapis.com/maps/api/js?v=3&sensor=false ) 异步加载 map API
当您查看脚本文件时,您会发现,这不是加载的 API,而是加载 API 的加载器。加载程序使用 document.write()
,在文档加载后调用时,什么会导致意外结果。
此外,文档的 onload 事件不会等待异步加载对象,它可能来得太快。
您也不能使用脚本的加载事件来调用初始化函数,因为当它触发时,加载加载器,而不是 map API。
做什么:
将回调参数附加到脚本 URL(以初始化函数的名称作为值)
<a href="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize" rel="noreferrer noopener nofollow">http://maps.googleapis.com/maps/api/js?v=3&sensor=false&<b>callback=initialize</b></a>
现在你得到了一个不同的加载器:
- 不使用
document.write()
- 加载 map API 后调用回调函数(初始化)
演示:http://jsfiddle.net/doktormolle/7cu2F/
<小时/>与评论相关:似乎回调必须是直接附加到窗口的函数。谷歌不酷:)
还有另一个选项,the google-API-loader它支持使用函数引用(而不是函数名称)。
示例,异步加载 map API,但仅当存在 ID 为 map-canvas
的元素时才加载。在文档中,然后创建一个 map :
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>
关于javascript - 未定义的异步 Google Maps API v3 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14184956/