geoGoogle.html：

Question

注意：以下引用的html的原始来源来自http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map和Google Maps Javascript V3 geolocation - cannot access initialLocation variable unless alerted

我收集了三个不同版本的地理定位示例。一切都在Firefox中正常工作。无法在Chrome中使用。我已将Chrome权限设置为允许所有网站使用我的位置，但仍然没有成功。它必须是Chrome设置，但不是显而易见的设置：设置/显示高级设置/隐私/内容设置/位置/允许所有网站跟踪我的实际位置。

在Firefox中，我在提示共享位置后会看到我当前的位置。

在Chrome中，我收到了用户拒绝地理定位的请求或错误：地理定位服务失败，具体取决于html。

鉴于这适用于Firefox而不是Chrome，我认为它必须是Chrome设置，但我只是不知道我能做什么比允许所有网站跟踪我的物理位置更宽松。

以下是三个HTML5文件：

geoGoogle.html：

<!DOCTYPE html>
<html>
 <head>
   <title>Geolocation</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
   <!--
   Include the maps javascript with sensor=true because this code is using a
   sensor (a GPS locator) to determine the user's location.
   See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
   -->
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

   <script>
var map;

function initialize() {
 var mapOptions = {
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);

 // Try HTML5 geolocation
 if(navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
          var infowindow = new google.maps.InfoWindow({
            map: map,
            position: initialLocation ,
            content: 'Location found using W3C standard'
          });
          var marker = new google.maps.Marker({
            position: initialLocation, 
            map: map
          });
        }, function() {
          handleNoGeolocation(true);
        });
 } else {
   // Browser doesn't support Geolocation
   handleNoGeolocation(false);
 }
}

function handleNoGeolocation(errorFlag) {
 if (errorFlag) {
   var content = 'Error: The Geolocation service failed.';
 } else {
   var content = 'Error: Your browser doesn\'t support geolocation.';
 }

 var options = {
   map: map,
   position: new google.maps.LatLng(60, 105),
   content: content
 };

 var infowindow = new google.maps.InfoWindow(options);
 map.setCenter(options.position);
}

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

   </script>
 </head>
 <body>
   <div id="map-canvas"></div>
 </body>
</html>

geoGoogle2.html：

<!DOCTYPE html>
<html>
 <head>
   <title>Geolocation</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
   <!--
   Include the maps javascript with sensor=true because this code is using a
   sensor (a GPS locator) to determine the user's location.
   See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
   -->
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

   <script>
var map;

function initialize() {
 var mapOptions = {
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);

 // Try HTML5 geolocation
 if(navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
     var pos = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

     var infowindow = new google.maps.InfoWindow({
       map: map,
       position: pos,
       content: 'Location found using HTML5.'
     });

     map.setCenter(pos);
   }, function() {
     handleNoGeolocation(true);
   });
 } else {
   // Browser doesn't support Geolocation
   handleNoGeolocation(false);
 }
}

function handleNoGeolocation(errorFlag) {
 if (errorFlag) {
   var content = 'Error: The Geolocation service failed.';
 } else {
   var content = 'Error: Your browser doesn\'t support geolocation.';
 }

 var options = {
   map: map,
   position: new google.maps.LatLng(60, 105),
   content: content
 };

 var infowindow = new google.maps.InfoWindow(options);
 map.setCenter(options.position);
}

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

   </script>
 </head>
 <body>
   <div id="map-canvas"></div>
 </body>
</html>

geoGoogle3.html：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
  }

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>

由于

Answer 1

Chrome和Safari（webkit浏览器）不允许Geolocation API用于文件系统中的文件。

只需创建一个Web应用程序并尝试使用localhost（如

）访问它

http://localhost/geoGoogle.html

Answer 2

只使用HTTPS而不是HTTP，它将起作用

Google Maps Javascript GeoLocation - 不适用于Chrome

geoGoogle.html：

geoGoogle2.html：

geoGoogle3.html：

2 个答案: