为什么 Geolocation HTML5 getCurrentPosition() 在 Google 地图上不起作用? [英] Why Geolocation HTML5 getCurrentPosition() is not working on Google Map?
问题描述
这是我在 javascript 文件下运行时遇到的错误
This is the error that I am getting while running below javascript file
getCurrentPosition() 和 watchPosition() 不再适用于不安全的来源.要使用此功能，您应该考虑将应用程序切换到安全来源，例如 HTTPS.有关详细信息，请参阅 https.
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https for more details.
这是我的javascript文件
This is my javascript file
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4HSRrQSje--aI6ImtJF30s5ezaUWxsow&libraries=places"></script>
<script>
function getLocation()
{
console.log("In geolocation");
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
print("Browser doesn't support geolocation");
}
function showPosition(position)
{
console.log("in show position");
dest_lat=position.coords.latitude;
dest_long=position.coords.longitude;
url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+ dest_lat + ',' + dest_long + '&sensor=false';
$.get(url, function(data)
{
if (data.status == 'OK')
{
map.setCenter(data.results[0].geometry.location);
console.log("Dragaed lat "+marker.getPosition().lat());
console.log("Dragged lng "+marker.getPosition().lng());
console.log("Address "+data.results[0].formatted_address);
}
});
}
</script>
</head>
<body>
<input type="button" value="LocateMe" onclick="getLocation();"/>
</body>
</html>
推荐答案
你必须把它放在一个带有 https:// 的服务器上！
You have to put it one a server with https://!
如果您使用的是 Visual Studio，您可以使用 https:// 配置为网站提供午餐，请参阅:https://dotnetcodr.com/2015/09/18/how-to-enable-ssl-for-a-net-project-in-visual-studio/或者你可以在 jsfiddler 上测试它，它默认使用 https.
If you are using Visual Studio, you can configure to lunch the site with https:// see: https://dotnetcodr.com/2015/09/18/how-to-enable-ssl-for-a-net-project-in-visual-studio/
Alternativelyyou can test it on jsfiddler, which uses https per default.
除此之外，您的代码还有很多其他错误.
Besides that your code has a lot of other errors.
- 括号不匹配
map对象未在您的示例中定义- 未声明变量(它们被添加到全局命名空间中，这可能会导致一些非常棘手的问题，并在您使用
"use strict"时抛出错误)
- Brackets don't match
mapobject is not defined in your example- varibles are not declared (they are added to the global namespace which can cause some really nasty problems later on and throws an error when you use
"use strict")
这是一个关于 jsfiddle 的工作示例:https://jsfiddle.net/3gkkvs50/(stackoverflow 在示例中不使用 https)
Here is a working excample on jsfiddle: https://jsfiddle.net/3gkkvs50/ (stackoverflow doesn't use https for the examples)
HTML:
<input type="button" value="LocateMe" onclick="getLocation();" />
JS:
function getLocation() {
console.log("In geolocation");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
print("Browser doesn't support geolocation");
}
}
function showPosition(position) {
console.log("in show position");
var dest_lat = position.coords.latitude;
var dest_long = position.coords.longitude;
var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + dest_lat + ',' + dest_long + '&sensor=false';
$.get(url, function(data) {
alert(JSON.stringify(data));
});
}
这篇关于为什么 Geolocation HTML5 getCurrentPosition() 在 Google 地图上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
