谷歌地圖不在本地主機上繪製地圖

-1

我想先使用navigator.geolocation獲取當前的座標，然後使用緯度和經度繪製地圖。谷歌地圖不在本地主機上繪製地圖

但它沒有顯示地圖，只是空白的白色屏幕。

<html> 
<style type="text/css"> 
     html{height: 100%} 
     body{height: 100%; margin: 0; padding: 0} 
     #map-canvas{height: 100%} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script> 
function getLocation() 
{ 
    if (navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } 
    else 
     alert("Geolocation is not supported by this browser"); 
} 
function showPosition(position) 
{ 
    coord = {}; 
    coord.lat = position.coords.latitude; 
    coord.longi = position.coords.longitude; 
    initialize(coord); 
} 

function initialize(coord) { 
    var map_canvas = document.getElementById('map_canvas'); 
    var map_options = { 
    center: new google.maps.LatLng(coord.lat, coord.longi), 
    zoom:8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(map_canvas, map_options); 
} 
google.maps.event.addDomListener(window, 'load', getLocation); 


</script> 
<body> 
<div id="map_canvas" data-role="page"></div> 
</body> 
</html>

來源

2015-04-22 user17282

你確定你在localhost（本地web服務器）而不是本地文件系統上運行這個嗎？你使用哪個瀏覽器？ –

python -m http.server 80很確定！ – user17282

我正在使用chrome瀏覽器。 – user17282

我要發佈此http://jsfiddle.net/n5jqpo9u/1/，說我沒有看到你的代碼中的問題和防雷工程...

和權利之前，我按下按鈕後，我才明白，你用map-canvas，而不是map_canvas爲你的CSS ...

-和_ :(

順便說一句，你不能得到位置，當您使用Chrome運行它作爲一個文件。此外，如果操作超時，或者您的應用程序沒有位置權限，它也會顯示一個白頁。所以你應該像這樣添加錯誤處理：
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error

來源

2015-04-22 22:34:52 kaho

哦，我的上帝！老兄你有鷹眼！ – user17282

谷歌地圖不在本地主機上繪製地圖

回答

相關問題