使用 HTML5 Geolocation API 未显示带有标记的 Google 地图答案

【问题标题】：Google map with marker not displayed using the HTML5 Geolocation API使用 HTML5 Geolocation API 未显示带有标记的 Google 地图
【发布时间】：2016-05-18 02:31:20
【问题描述】：

我尝试复制以下示例。 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>

【问题讨论】：

标签： html google-maps model-view-controller

【解决方案1】：

在获得我自己的 google API 密钥并重新格式化如下代码后，我可以让它在 IE 和 Firefox 上运行。仍在使用 chrome，它无法正常工作。

<!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>

【讨论】：

【解决方案2】：

您帖子中的代码对我有用。最有可能：

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

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

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

代码 sn-p：

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 的网站使用它？
我尝试在 IE 11 上的 VS localhost 上启用 https。问题似乎相同。在 Chrome 上，我对 https 有一些问题，它说证书不受信任。
您只能在 Chrome 的安全站点上使用它，其他浏览器（尤其是 IE）可能没有这个限制。小提琴对你有用吗？博客示例对您有用吗？查看浏览器中的控制台，应该有一些迹象表明它为什么不工作。
是的，小提琴，博客示例正在运行。不幸的是，我在控制台上没有看到任何错误。我看到以下警告。 "Google Maps API 警告：NoApiKeys developers.google.com/maps/documentation/javascript/…" util.js:222:12 "Google Maps API 警告：SensorNotRequired developers.google.com/maps/documentation/javascript/…"

【解决方案3】：

您的代码看起来不错，但您需要确保您使用的是 SSL，否则它将无法正常工作（或在视觉上看起来无法正常工作）。从大约一个月前开始，如果您希望使用 Google 的多项服务（包括但不限于地理位置），Google 已强制使用 SSL 对您的网站进行认证。

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

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

【讨论】：