谷歌地圖V3 API不在localhost工作

我從谷歌地圖文檔複製下面的JavaScript代碼，但它不起作用，它只顯示一個白色的空白頁面，沒有加載。谷歌地圖V3 API不在localhost工作

<!DOCTYPE html> 
    <html> 
<head> 
    <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 

<!-- 
Include the maps javascript with sensor=true because this code is using a 
sensor (a GPS locator) to determine the user's location. 
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor 
--> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 

<script type="text/javascript"> 
    var map; 

    function initialize() { 
    var myOptions = { 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     myOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

     var infowindow = new google.maps.InfoWindow({ 
      map: map, 
      position: pos, 
      content: 'Location found using HTML5.' 
     }); 

     map.setCenter(pos); 
     }, function() { 
     handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 
    } 


    function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
     var content = 'Error: The Geolocation service failed.'; 
    } else { 
     var content = 'Error: Your browser doesn\'t support geolocation.'; 
     } 

     var options = { 
     map: map, 
     position: new google.maps.LatLng(60, 105), 
     content: content 
     }; 

     var infowindow = new google.maps.InfoWindow(options); 
     map.setCenter(options.position); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id="map_canvas"></div> 
</body> 
    </html>

既然v3需要api key有什麼問題呢？我檢查了谷歌Chrome和Firefox，但沒有線索。

來源

2011-11-26 Isuru

看起來你錯過了一個關閉html標籤，除非這是一個錯字。

在頁面底部添加此</html>。

來源

2011-11-26 02:37:00

對不起我的錯......當我剪切和粘貼它省略。不，這不是它不工作的原因。 – Isuru

您需要提供一個center位置創建您的map。在您的initialize()功能更改地圖選項，包括你想開始位置：

var myCenter = new google.maps.LatLng(60.0,105.0); 
var myOptions = { 
    zoom: 6, 
    center: myCenter, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
};

當（或如果）你從地理定位服務中心將通過您的代碼進行更改的位置。

來源

2011-11-26 22:18:27

老問題，將在萬一別人的土地，無論如何回答這裏。

最後我用一個稍微不同的實現來得到這個工作：

<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = {zoom: 8, center: new google.maps.LatLng(-34.397, 150.644)}; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
            mapOptions); 
    } 

    function loadScript() { 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp'+ 
       '&key={{API_KEY}}&sensor=false&callback=initialize'; 
    document.body.appendChild(script); 
    } 

    window.onload = loadScript(); 
</script>

，我不得不添加讓它從這個其他（幾乎相同）版本工作的一部分，是（）在loadScript（）的末尾。隱式函數調用根本沒有發生。

您將需要更換{{API_KEY}}用自己的。我不確定這是否是必需的，但這是導致我實施工作的一部分。

如果沒有，請按照下列步驟列出here

來源

2014-05-14 08:53:36 Rosseyn

谷歌地圖V3 API不在localhost工作

回答

相關問題