Google Maps Javascript GeoLocation - 不适用于 Chrome
Posted
技术标签:
【中文标题】Google Maps Javascript GeoLocation - 不适用于 Chrome【英文标题】：Google Maps Javascript GeoLocation - Not working on Chrome 【发布时间】：2013-07-02 15:23:57 【问题描述】：注意：下面引用的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 中，我得到 User denied the request for Geolocation 或 错误：地理位置服务失败，具体取决于 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);
elsex.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>
谢谢
【问题讨论】：
W3C Geolocation API not working in Chrome的可能重复 是的，它是重复的。我正在使用 file:///... 谢谢大卫。顺便说一句，由于您的答案旁边没有绿色复选标记，我该怎么办？我应该删除问题吗？ 不，别说了。你的代码可能会帮助别人。如果社区认为没有必要，它会得到照顾。 【参考方案1】：Chrome 和 safari（webkit 浏览器）不允许 Geolocation API 用于文件系统中的文件。
只需创建一个 Web 应用程序并尝试使用类似 localhost 的方式访问它
http://localhost/geoGoogle.html
【讨论】：
仍然无法在 safari 5.1.7 中获得它【参考方案2】：只需使用 HTTPS 而不是 HTTP，它就可以工作
【讨论】：
以上是关于Google Maps Javascript GeoLocation - 不适用于 Chrome的主要内容，如果未能解决你的问题，请参考以下文章
在 typescript/javascript 的 google.maps.Geocoder().geocode() 上使用全局变量
Google Maps JavaScript API 警告：NoApiKeys
Google Maps Javascript API、DirectionsService、国家列表