Google Maps API和Internet Explorer 8/9

由於某些原因，通過JavaScript API的Google地圖在Internet Explorer中無法正確加載。Google Maps API和Internet Explorer 8/9

它顯示在Google Chrome & Firefox絕對好。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Maps</title> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
     <style> 
      #map_canvas {font: 12px Arial, Helvetica, sans-serif; color:#3B3B3B; height:400px; width: 700px;} 
      .text {text-align:center; color:#3B3B3B;} 
     </style> 
     <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 
     <script type="text/javascript"> 
      var geocoder; 
      var map; 

      function initialize() { 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = { 
       zoom: 15, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      } 

      function codeAddress() { 
      var address = '50 Bond Street, London'; 
      geocoder.geocode({ 'address': address}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       } else { 
      //Not Found 
       } 
      }); 
      } 
     </script> 
     <script type="text/javascript"> 
      initialize(); 
      codeAddress(); 
     </script> 
    </head> 
    <body onload="initialize(); codeAddress();"> 
     <div id="map_canvas"></div> 
    </body> 
</html>

奇怪的是，如果我在Body上放置onmouseover並調用函數，它似乎又開始工作了？但它顯然每次都重新加載地圖！

來源

2011-07-18 techco1

我看到你正在從body onload事件中調用你的函數。也許那時腳本沒有正確加載？

嘗試以這種方式加載api。您可以異步加載API並指定一個回調函數來初始化內容。

<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7Bmodules%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    google.setOnLoadCallback(initialize); 
</script>

[編輯：以前的解決方案沒有工作。真正的解決方案是在評論中，我只是把它放在這裏]

來源

2011-07-18 16:20:18 boulaycote

嗨馬克西姆，這回來了一個錯誤。我認爲這是因爲它不能追加標籤，直到主體加載完成。它返回一個NULL錯誤。 – techco1

我認爲值得注意的是，這是從另一個具有iFrame的頁面調用的。我認爲這可能是背後的問題。 – techco1

事實上，如果你在頁面加載後發生的mouseover事件上綁定你的函數，這一切都會讓我認爲腳本沒有在IE onload事件中正確加載。加載API異步應該解決這個問題，因爲你可以提供一個回調方法來初始化你的組件。我正在使用此方法在我的項目中加載地圖[Autoload]（http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/autoload.html） – boulaycote

Google Maps API和Internet Explorer 8/9

回答

相關問題