Html Google Maps Javascript GeoLocation - 不适用于 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17429527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps Javascript GeoLocation - Not working on Chrome
提问by user825628
Note: The original source for the html quoted below came from http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_mapand Google Maps Javascript V3 geolocation - cannot access initialLocation variable unless alerted
注意：下面引用的 html 的原始来源来自http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map和Google Maps Javascript V3 geolocation - 除非收到警报，否则无法访问 initialLocation 变量
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.
我收集了三个不同版本的地理定位示例。一切都在 Firefox 中正常工作。在 Chrome 中没有工作。我已将 Chrome 权限设置为允许所有网站使用我的位置，但仍然没有成功。它必须是 Chrome 设置，但不是明显的设置：设置/显示高级设置/隐私/内容设置/位置/允许所有站点跟踪我的物理位置。
In Firefox I see my current location after being prompted to Share Location.
在 Firefox 中，我会在提示共享位置后看到我的当前位置。
In Chrome I get User denied the request for Geolocation or Error: The Geolocation service failed depending on the html.
在 Chrome 中，我收到用户拒绝地理定位请求或错误：地理定位服务失败取决于 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.
鉴于这适用于 Firefox 而不是 Chrome，我认为它必须是 Chrome 设置，但我只是不知道我能做什么比允许所有站点跟踪我的物理位置更宽容。
Here are the three HTML5 files:
以下是三个 HTML5 文件：
geoGoogle.html:
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:
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:
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
谢谢
回答by Arjun Vachhani
Chrome and safari (webkit browsers) does not allow Geolocation API for files that are in file system.
Chrome 和 safari（webkit 浏览器）不允许对文件系统中的文件使用 Geolocation API。
just create a web application and try to access it with localhost like
只需创建一个 Web 应用程序并尝试使用 localhost 访问它，例如
http://localhost/geoGoogle.html
回答by wessam
just use HTTPS instead of HTTP and it will work
只需使用 HTTPS 而不是 HTTP 就可以了
