没有使用HTML5地理定位API显示带有标记的谷歌地图

我尝试复制以下示例。http://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/

我无法在浏览器上查看除纬度和经度以外的地图。当我点击上面链接上的"在地图上显示我的位置"按钮时，效果也是一样的。

我在这个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>

在google 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>

你帖子中的代码对我有效。很可能：

您不是从安全域提供服务（通过https://）
你在某个时候拒绝了地理定位

链接博客中的地理位置示例也只适用于来源安全的我https://viralpatel.net/blogs/html5-geolocation-api-tutorial-example/（至少在Chrome中）。

fiddle（在允许地理定位的计算机上为我工作）

代码片段：

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" />

您的代码看起来不错，但您需要确保您使用的是SSL，否则它将不起作用（或者从视觉上看它不起作用）。自大约一个月前以来，如果你想使用他们的一些服务，包括但不限于地理位置，谷歌已经强制用SSL认证你的网站。

现在只能通过HTTPS进行通信。您可以在此处查看2016年4月的更多信息。

我之所以提到这一点，是因为在过去的3个月里，我一直在将大约100个客户端迁移到SSL，即使到了今天，仍然有太多的客户端不听，现在出现了不同的问题，如"糟糕！地理定位功能不受支持"或Google API根本不起作用。但当您查看浏览器控制台时，它会提到原因。

相关内容

最新更新

热门标签：