求教：google map api通过动态<script>方式引入出错
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD3dfd2O_9xqsqnfasdfKzJ3q2kdfggreQuVNM&sensor=true">
</script>
<script type="text/javascript">
function importScript() {
var mapScript = document.createElement("Script");
mapScript.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyD3dfd2O_9xqsqnfasdfKzJ3q2kdfggreQuVNM&sensor=true";
mapScript.id = "mapScript";
document.getElementsByTagName("head")[0].appendChild(mapScript);
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
</script>
</head>
<body onload="/*importScript();*/initialize();">
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>
如果采取importScript()方式则出错，而直接<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD3dfd2O_9xqsqnfasdfKzJ3q2kdfggreQuVNM&sensor=true">
</script>引用则可以，为什么？？
通过chrome跟踪发现在 new google.maps.LatLng(-34.397, 150.644),这里出错，google.maps为object,而google.maps.LatLng为null,Why?
也就是动态载入成功了，因为google.maps不为null，但是为什么google.maps.LatLng为null？？
求大神赐教！！
[解决办法]
<head>
<script>
//追加事件，当加载完成后，调用回调函数
function bindEventLoaded(mapScript, callback){
if(mapScript.addEventListener) //火狐 谷歌 Opera
{
mapScript.addEventListener("load",
function(){
callback();
},
false
);
}
else if(mapScript.attachEvent) //IE
{
mapScript.attachEvent("onreadystatechange",
function(Dom){
if(Dom.srcElement.readyState=="loaded"
------解决方案--------------------
Dom.srcElement.readyState=="complete"){
callback();
}
}
);
}
}
function createScript(){
var mapScript = document.createElement("Script");
bindEventLoaded(mapScript, function(){alert(google.maps);});//当 script 标签加载完 src 中的内容后，再调用里面存在的函数
mapScript.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyD3dfd2O_9xqsqnfasdfKzJ3q2kdfggreQuVNM&sensor=true";
mapScript.id = "mapScript";
document.getElementsByTagName("head")[0].appendChild(mapScript);
alert(google.maps); //这里是不能调用的，这里调用时，可能 src 还没加载完
}
</script>
</head>
<body onload="createScript()">
</body>
[解决办法]
(function(){
if(google && google.maps && google.maps.LatLng){
initialize();
}else{
setTimeout(arguments.callee);
}
})();
[解决办法]
找到原因了
http://maps.google.com/maps/api/js?sensor=true 这个js打开后，发现有这么一段代码
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
//之后的调用
getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/12/8/main.js");
document.write，居然是 document.write!!
document.write 有一个特性，那就是：
页面没有加载完时，会在当前代码位置 write
页面加载完后，再调用，会把 body 中的内容清空在 write
所以，<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 时，是正常的，而 window.onload 后发生的事，符合了页面加载完成这一条件，document中的东西都被清理了……其中包括 getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/12/8/main.js");输出的标签……，所以自然就没有 LatLng 了……