使用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地图

回答

相关问题