日期:2014-05-16  浏览次数:20329 次

求教: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"&n