google 地图 api通过动态<script>方式引入出错

2013-04-20

求教：google map api通过动态script方式引入出错!DOCTYPE htmlhtmlheadmeta nameviewport con

求教：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);
   }
})();
[解决办法]
google 地图 api通过动态<script>方式引入出错

找到原因了

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 了……

热点排行

JavaScript

google 地图 api通过动态<script>方式引入出错