使用HTML5地理位置API未顯示標記的Google地圖

我試圖複製以下示例。 http://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/使用HTML5地理位置API未顯示標記的Google地圖

我無法在瀏覽器上查看緯度和經度以外的地圖。當我點擊上面鏈接中的「在地圖上顯示我的位置」按鈕時，也是如此。

我錯過了這個HTML中的東西嗎？

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" 
      src="https://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     var map = null; 
     function showlocation() { 
      // One-shot position request. 
      navigator.geolocation.getCurrentPosition(callback, errorHandler); 
     } 

     function callback(position) { 

      var lat = position.coords.latitude; 
      var lon = position.coords.longitude; 

      document.getElementById('latitude').innerHTML = lat; 
      document.getElementById('longitude').innerHTML = lon; 

      var latLong = new google.maps.LatLng(lat, lon); 

      var marker = new google.maps.Marker({ 
       position: latLong 
      }); 

      marker.setMap(map); 
      map.setZoom(8); 
      map.setCenter(marker.getPosition()); 
     } 

     google.maps.event.addDomListener(window, 'load', initMap); 
     function initMap() { 
      var mapOptions = { 
       center: new google.maps.LatLng(0, 0), 
       zoom: 1, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("mapdiv"), 
               mapOptions); 

     } 

     function errorHandler(error) { 
      switch (error.code) { 
       case error.PERMISSION_DENIED: 
        alert("User denied the request for Geolocation."); 
        break; 
       case error.POSITION_UNAVAILABLE: 
        alert("Location information is unavailable."); 
        break; 
       case error.TIMEOUT: 
        alert("The request to get user location timed out."); 
        break; 
       case error.UNKNOWN_ERROR: 
        alert("An unknown error occurred."); 
        break; 
      } 
     } 
    </script> 
</head> 
<body> 
    <center> 
     <input type="button" value="Show my location on Map" 
       onclick="javascript:showlocation()" /> <br /> 
    </center> 

    Latitude: <span id="latitude"></span>  <br /> 
    Longitude: <span id="longitude"></span> 
    <br /><br /> 
    <div>Map</div> 
    <div id="mapdiv" /> 
</body> 
</html>

來源

2016-05-18 crazy coding

讓我自己在谷歌API密鑰和重新格式化像下面的代碼後，我能得到它的工作IE和Firefox。仍然在鉻，它不工作。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <center> 
     <input type="button" value="Show my location on Map" 
       onclick="javascript:showlocation()" /> <br /> 
       Latitude: <span id="latitude"></span>  <br /> 
    Longitude: <span id="longitude"></span> 
    <br /><br /> 
    </center> 
    <div id="map"></div> 
    <script> 
     var map; 
     function showlocation() { 
      // One-shot position request. 
      navigator.geolocation.getCurrentPosition(callback); 
     } 

     function callback(position) { 

      var lat = position.coords.latitude; 
      var lon = position.coords.longitude; 

      document.getElementById('latitude').innerHTML = lat; 
      document.getElementById('longitude').innerHTML = lon; 

      var latLong = new google.maps.LatLng(lat, lon); 

      var marker = new google.maps.Marker({ 
       position: latLong 
      }); 

      marker.setMap(map); 
      map.setZoom(8); 
      map.setCenter(marker.getPosition()); 
     } 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_OWN_KEY_GET_FROM_GOOGLE_API_AND_REPLACE_THIS_STRING&callback=initMap" 
    async defer></script> 
    </body> 
</html>

來源

2016-05-18 13:43:18

您的文章中的代碼適用於我。最有可能的：

你不是從一個安全域爲它服務（通過https：//）
你在某些時候

否認地理位置在鏈接的博客的地理位置例子也只爲我工作的安全起源https://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/（至少在Chrome中）。

fiddle (works for me on a computer that allows geolocation)

代碼片段：

var map = null; 
 

 
function showlocation() { 
 
    // One-shot position request. 
 
    navigator.geolocation.getCurrentPosition(callback, errorHandler); 
 
} 
 

 
function callback(position) { 
 

 
    var lat = position.coords.latitude; 
 
    var lon = position.coords.longitude; 
 

 
    document.getElementById('latitude').innerHTML = lat; 
 
    document.getElementById('longitude').innerHTML = lon; 
 

 
    var latLong = new google.maps.LatLng(lat, lon); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: latLong 
 
    }); 
 

 
    marker.setMap(map); 
 
    map.setZoom(8); 
 
    map.setCenter(marker.getPosition()); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initMap); 
 

 
function initMap() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(0, 0), 
 
    zoom: 1, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("mapdiv"), 
 
    mapOptions); 
 

 
} 
 

 
function errorHandler(error) { 
 
    switch (error.code) { 
 
    case error.PERMISSION_DENIED: 
 
     alert("User denied the request for Geolocation."); 
 
     break; 
 
    case error.POSITION_UNAVAILABLE: 
 
     alert("Location information is unavailable."); 
 
     break; 
 
    case error.TIMEOUT: 
 
     alert("The request to get user location timed out."); 
 
     break; 
 
    case error.UNKNOWN_ERROR: 
 
     alert("An unknown error occurred."); 
 
     break; 
 
    } 
 
}

html, 
 
body, 
 
#mapdiv { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<center> 
 
    <input type="button" value="Show my location on Map" onclick="javascript:showlocation()" /> 
 
    <br /> 
 
</center> 
 

 
Latitude: <span id="latitude"></span> 
 
<br />Longitude: <span id="longitude"></span> 
 
<br /> 
 
<br /> 
 
<div>Map</div> 
 
<div id="mapdiv" />

來源

2016-05-18 03:31:27 geocodezip

您的意思是，我只能通過啓用SSL的站點使用它嗎？ –

我試着在我的VS本地主機上，在IE 11上啓用https。問題似乎相同。在Chrome上，我對https有一些問題，它說cerficiate不被信任。 –

您只能在安全站點的Chrome中使用它，其他瀏覽器（特別是IE）可能沒有此限制。小提琴是否適合你？博客示例是否適合您？看看瀏覽器中的控制檯，應該有一些跡象表明它不工作的原因。 – geocodezip

你的代碼看起來很不錯，但是你需要確保你使用的是SSL，否則它將不起作用（或者看起來像是不工作）。從大約一個月前開始，如果您希望使用他們的幾項服務（包括但不限於地理位置），Google已強制使用SSL對您的網站進行認證。

通信現在只完成through HTTPS。您可以從April 2016 here查看更多信息。

我之所以提到這一點是因爲我在過去的3個月裏已經將大約100個客戶端遷移到了SSL上，因此，即使在今天，仍然有太多的問題沒有聽取，現在有不同的問題，比如「Oops ！不支持地理定位功能「或Google API無法正常工作。但是，當您查看瀏覽器控制檯時，會提到原因。

來源

2016-05-19 16:18:43

使用HTML5地理位置API未顯示標記的Google地圖

回答

相關問題