Google Maps Javascript地理位置 - 不适用于Chrome [英] Google Maps Javascript GeoLocation - Not working on Chrome

查看：98
本文介绍了Google Maps Javascript地理位置 - 不适用于Chrome的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

注意：下面引用的html的源代码来自 http：/ /www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map 和谷歌地图Javascript V3地理位置 - 除非收到警报，否则无法访问initialLocation变量



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



在Firefox中，我看到我的当前位置后提示Share Location。



在Chrome中，我得到用户拒绝地理定位请求或
错误：Geolocation服务失败这取决于HTML。



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



以下是三个HTML5文件：



geoGoogle.html：



 <！DOCTYPE html> 
< html> 
< head> 
< title> Geolocation< / title> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> 
< meta charset =utf-8> 
< link href =https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css =stylesheet> 
 <！ -  
包含地图javascript与sensor = true，因为此代码使用
传感器（GPS定位器）来确定用户的位置。 
请参阅：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; 
 
函数initialize（）{
 var mapOptions = {
 zoom：6，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（'map-canvas'），
 mapOptions）; 
 
 //尝试HTML5地理定位
 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，
位置：initialLocation，
 content：'使用W3C标准'
}找到的位置）; 
 var marker = new google.maps.Marker（{
 position：initialLocation， 
 map：map 
}）; 
}，function（）{
 handleNoGeolocation（true）; 
}）; 
} else {
 //浏览器不支持地理定位
 handleNoGeolocation（false）; 
 
 
 
函数handleNoGeolocation（errorFlag）{
 if（errorFlag）{
 var content ='错误：地理定位服务失败。 
} else {
 var content ='错误：您的浏览器不支持地理位置。 
} 
 
 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 =viewportcontent =initial-scale = 1.0，user-scalable = no> 
< meta charset =utf-8> 
< link href =https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css =stylesheet> 
 <！ -  
包含地图javascript与sensor = true，因为此代码使用
传感器（GPS定位器）来确定用户的位置。 
请参阅：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; 
 
函数initialize（）{
 var mapOptions = {
 zoom：6，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（'map-canvas'），
 mapOptions）; 
 
 //尝试HTML5地理定位
 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，
位置：pos，
 content：'使用HTML5找到的位置。'
}）; 
 
 map.setCenter（pos）; 
}，function（）{ 
 handleNoGeolocation（true）; 
}）; 
} else {
 //浏览器不支持地理定位
 handleNoGeolocation（false）; 
 
 
 
函数handleNoGeolocation（errorFlag）{
 if（errorFlag）{
 var content ='错误：地理定位服务失败。 
} else {
 var content ='错误：您的浏览器不支持地理位置。 
} 
 
 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> 
 
< button onclick =getLocation（）>试试< / button> 
< div id =mapholder>< / div> 
< script> 
 var x = document.getElementById（demo）; 
函数getLocation（）
 {
 if（navigator.geolocation）
 {
 navigator.geolocation.getCurrentPosition（showPosition，showError）; 
 
 else {x.innerHTML =此浏览器不支持地理定位。;} 
} 
 
函数showPosition（位置）
 { 
 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 =假; 
 document.getElementById（mapholder）。innerHTML =< img src ='+ img_url +'>; 
 
 
函数showError（错误）
 {
 switch（error.code）
 {
 case error.PERMISSION_DENIED：
 x.innerHTML =用户拒绝了地理定位请求。 
休息; 
 case error.POSITION_UNAVAILABLE：
 x.innerHTML =位置信息不可用。 
休息; 
 case error.TIMEOUT：
 x.innerHTML =请求获取用户位置超时。 
休息; 
 case error.UNKNOWN_ERROR：
 x.innerHTML =发生未知错误。 
休息; 
} 
} 
< / script> 
< / body> 
< / html>

谢谢

解决方案 Chrome和safari（webkit浏览器）不允许Geolocation API处理文件系统中的文件。



只需创建一个Web应用程序并尝试使用本地主机访问该应用程序，如 

  http：//localhost/geoGoogle.html


Note: The original source for the html quoted below came from http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map and Google Maps Javascript V3 geolocation - cannot access initialLocation variable unless alerted

I've gathered three different versions of geolocation examples. All work properly in Firefox. None work in Chrome. I've set the Chrome permission to allow all sites to use my location, but still no success. It must be a Chrome setting, but not the obvious one: Settings/Show Advanced Settings/Privacy/Content Settings/Location/Allow all sites to track my physical location.

In Firefox I see my current location after being prompted to Share Location.

In Chrome I get User denied the request for Geolocation or Error: The Geolocation service failed depending on the html.

Given that is works in Firefox and not Chrome I figure it has to be a Chrome setting, but I just don't know what I can do that is more permissive than Allow all sites to track my physical location.

Here are the three HTML5 files:

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>

Thanks

解决方案

Chrome and safari (webkit browsers) does not allow Geolocation API for files that are in file system.

just create a web application and try to access it with localhost like

http://localhost/geoGoogle.html

这篇关于Google Maps Javascript地理位置 - 不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆