无法在网站上使用 google-maps api 获取当前位置

Question

我对 google 地图有点陌生 api，我想要实现的是将地图集成到我的网站并获得我当前的位置。我遵循了一些教程并看到了演示，一切都很好并且工作正常，我得到了当前的本地化。

http://www.html5-css3.fr/demo/exemple-geolocalisation-html5-api-google-maps http://www.astuces-webmaster.ch/page/geoloc-html5-google-maps

但问题是当我自己编写并想在导航器中查看它时，我没有进行本地化。我以为我没有获取位置的权限，所以我在导航器参数中更改了它。我认为问题是当我运行一个位于我硬盘本地的页面时，我被阻止了。我收到这条消息 "tracking your location has been blocked for this page"

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% ; width:100%;}
  </style>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
  <script type="text/javascript">

    var previousPosition = null;

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 19,
            center: new google.maps.LatLng(48.858565, 2.347198),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });   
    }

    if (navigator.geolocation)
      var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
    else
      alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

    function successCallback(position){
      map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
        map: map
      });  
      if (previousPosition){
        var newLineCoordinates = [
           new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
           new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];

        var newLine = new google.maps.Polyline({
          path: newLineCoordinates,        
          strokeColor: "#FF0000",
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        newLine.setMap(map);
      }
      previousPosition = position;
    };    
  </script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

Answer 1

您之前似乎将浏览器设置为拒绝共享您的位置。单击显示地理定位被拒绝的图标并尝试启用它。如果不可能，请尝试重新启动浏览器。

最坏的情况是在不同的浏览器中尝试（来自 file:/// URL 的地理位置在 Chrome 上可能是禁止的）。

无法在网站上使用 google-maps api 获取当前位置

Can't get the current location with google-maps api on a website

javascript

html

google-maps

geolocation

google-maps-api-2