我有一个很简单的JS使用navigator。geolocation。getcurrentposition jammy。
$(document).ready(function(){
$("#business-locate, #people-locate").click(function() {
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
});
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
function foundLocation(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var userLocation = lat + ', ' + lon;
$("#business-current-location, #people-current-location").remove();
$("#Near-Me")
.watermark("Current Location")
.after("<input type='hidden' name='business-current-location' id='business-current-location' value='"+userLocation+"' />");
$("#people-Near-Me")
.watermark("Current Location")
.after("<input type='hidden' name='people-current-location' id='people-current-location' value='"+userLocation+"' />");
}
function noLocation() {
$("#Near-Me").watermark("Could not find location");
$("#people-Near-Me").watermark("Could not find location");
}
})//end DocReady
基本上，这里发生的事情是我们得到当前位置，如果它得到了，两个“水印”被放置在两个字段中，表示“当前位置”，两个隐藏字段被创建，并使用latong数据作为它们的值(它们在开始时被删除，这样它们就不会每次都重复)。还有两个按钮，它们有一个点击功能，做同样的事情。
不幸的是，每隔三次左右，它就会奏效。
这里有什么问题?
在我们的例子中，它总是第一次工作，但重新运行函数3-4次以上，它就失败了。
简单的解决方法:将其值存储在LocalStorage中。
之前:
navigator.geolocation.getCurrentPosition((position) => {
let val = results[0].address_components[2].long_name;
doSthWithVal(val);
}, (error) => { });
后:
if(localStorage.getItem('getCurrentPosition') !== null) {
doSthWithVal(localStorage.getItem('getCurrentPosition'));
}
else {
navigator.geolocation.getCurrentPosition((position) => {
let val = results[0].address_components[2].long_name;
localStorage.setItem('getCurrentPosition',val);
doSthWithVal(val);
}, (error) => { });
}
传递给geolocation . getcurrentposition()的第二个参数是要处理任何地理位置错误的函数。错误处理函数本身接收一个PositionError对象，其中包含关于地理定位尝试失败原因的详细信息。我建议输出错误到控制台，如果你有任何问题:
var positionOptions = { timeout: 10000 };
navigator.geolocation.getCurrentPosition(updateLocation, errorHandler, positionOptions);
function updateLocation(position) {
// The geolocation succeeded, and the position is available
}
function errorHandler(positionError) {
if (window.console) {
console.log(positionError);
}
}
Doing this in my code revealed the message "Network location provider at 'https://www.googleapis.com/' : Returned error code 400". Turns out Google Chrome uses the Google APIs to get a location on devices that don't have GPS built in (for example, most desktop computers). Google returns an approximate latitude/longitude based on the user's IP address. However, in developer builds of Chrome (such as Chromium on Ubuntu) there is no API access key included in the browser build. This causes the API request to fail silently. See Chromium Issue 179686: Geolocation giving 403 error for details.
这是我解决这个问题的hack方法，至少它在所有当前的浏览器中都有效(在Windows上，我没有Mac):
if (navigator.geolocation) {
var location_timeout = setTimeout("geolocFail()", 10000);
navigator.geolocation.getCurrentPosition(function(position) {
clearTimeout(location_timeout);
var lat = position.coords.latitude;
var lng = position.coords.longitude;
geocodeLatLng(lat, lng);
}, function(error) {
clearTimeout(location_timeout);
geolocFail();
});
} else {
// Fallback for no geolocation
geolocFail();
}
如果有人点击“关闭”或选择“不”或在Firefox上选择“永不共享”选项，这也会起作用。
很笨拙，但很有效。
以下是我的解决方案，感谢一个闭包:
function geoloc(success, fail){
var is_echo = false;
if(navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(pos) {
if (is_echo){ return; }
is_echo = true;
success(pos.coords.latitude,pos.coords.longitude);
},
function() {
if (is_echo){ return; }
is_echo = true;
fail();
}
);
} else {
fail();
}
}
function success(lat, lng){
alert(lat + " , " + lng);
}
function fail(){
alert("failed");
}
geoloc(success, fail);
@brennanyoung的回答很好，但如果你想知道在失败的情况下该怎么做，你可以使用IP地理定位API，如https://ipinfo.io(这是我的服务)。这里有一个例子:
function do_something(coords) {
// Do something with the coords here
// eg. show the user on a map, or customize
// the site contents somehow
}
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords);
},
function(failure) {
$.getJSON('https://ipinfo.io/geo', function(response) {
var loc = response.loc.split(',');
var coords = {
latitude: loc[0],
longitude: loc[1]
};
do_something(coords);
});
};
});
详情见https://ipinfo.io/developers/replacing-getcurrentposition。
