如何获得用户's的位置,而无需请求许可,或者如果用户允许一次,则无需再请求
How can I get user's location without asking for the permission or if user permitted once so need not to ask ever again?
我正在使用MySQL、JavaScript和Ajax创建一个门户,我想获取用户的纬度和经度位置。如果不需要询问就无法获取位置,那么一旦用户授予权限,我就可以从任何页面获取位置,而无需再次询问。
提前感谢。
在这个答案中有三种方法:
- 获取GPS精确位置,要求用户允许访问其浏览器的API
- 使用外部GeoIP服务获取大致位置(国家、城市、地区)
- 使用CDN服务获取大致位置(国家、城市、地区)
要求用户允许访问其浏览器的API
您可以使用HTML5功能获取客户端的位置。如果是通过带有GPS的设备或大致位置完成的,这将为您提供用户的确切位置。一旦用户同意共享他的位置,您将在没有任何批准的情况下获得它。此解决方案使用Geolocation.getCurrentPosition()。在HTTPS协议下,大多数情况下都需要这样做。
如果您赶时间,这里有一款CodePen解决方案:https://codepen.io/sebastienfi/pen/pqNxEa
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
// Success function
showPosition,
// Error function
null,
// Options. See MDN for details.
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
处理错误和拒绝getCurrentPosition()方法的第二个参数用于处理错误。它指定了一个在无法获取用户位置时要运行的函数:
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;
}
}
在地图中显示结果
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+"'>";
}
GeoIP
如果上述解决方案在您的场景中不起作用,您可以使用IP的位置获得大致位置。你不一定会得到用户的确切位置,但最终可能会得到用户连接点区域中最近的互联网节点的位置,对于99%的用例(国家、城市、地区)来说,这个位置可能足够近。
由于这并不精确,但不需要用户的批准,因此也可以满足您的要求。
找到以下两种方法。我建议使用CDN解决方案,因为它更快,是的,速度非常重要。
使用外部GeoIP服务获取大致位置(国家、城市、地区)
许多外部服务允许您获取GeoIP位置。下面是谷歌的一个例子。
要获取您的Google API密钥,请访问此处:https://developers.google.com/loader/signup?csw=1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Get web visitor's location</title>
<meta name="robots" value="none" />
</head>
<body>
<div id="yourinfo"></div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=<YOUR_GOOGLE_API_KEY>"></script>
<script type="text/javascript">
if(google.loader.ClientLocation)
{
visitor_lat = google.loader.ClientLocation.latitude;
visitor_lon = google.loader.ClientLocation.longitude;
visitor_city = google.loader.ClientLocation.address.city;
visitor_region = google.loader.ClientLocation.address.region;
visitor_country = google.loader.ClientLocation.address.country;
visitor_countrycode = google.loader.ClientLocation.address.country_code;
document.getElementById('yourinfo').innerHTML = '<p>Lat/Lon: ' + visitor_lat + ' / ' + visitor_lon + '</p><p>Location: ' + visitor_city + ', ' + visitor_region + ', ' + visitor_country + ' (' + visitor_countrycode + ')</p>';
}
else
{
document.getElementById('yourinfo').innerHTML = '<p>Whoops!</p>';
}
</script>
</body>
</html>
使用CDN服务获取大致位置(国家、城市、地区)
大多数CDN都提供了使用外部服务的替代方案。此解决方案的优点是不需要额外的HTTP请求,因此速度更快。如果你已经有了CDN,这就是你的选择。您可以使用CloudFlare、CloudFront等
在这种情况下,您很可能会将位置作为HTTP请求标头的参数,甚至直接在窗口对象中,以便使用Javascript获取它。阅读CDN文档以了解更多信息。
于2018年12月中旬编辑,以添加更多选项。
您可以选择外部服务,如https://www.geolocation-db.com.他们提供基于IP地址的地理定位服务,您不需要用户许可。
- JSON:https://geolocation-db.com/json/
- JSONP:https://geolocation-db.com/jsonp/
试试这个例子:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geo City Locator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>Country: <span id="country"></span></div>
<div>State: <span id="state"></span></div>
<div>City: <span id="city"></span></div>
<div>Latitude: <span id="latitude"></span></div>
<div>Longitude: <span id="longitude"></span></div>
<div>IP: <span id="ip"></span></div>
<script>
$.getJSON('https://geolocation-db.com/json/')
.done (function(location) {
$('#country').html(location.country_name);
$('#state').html(location.state);
$('#city').html(location.city);
$('#latitude').html(location.latitude);
$('#longitude').html(location.longitude);
$('#ip').html(location.IPv4);
});
</script>
</body>
</html>
可以根据web请求的原始IP地址猜测纬度和经度。您需要访问将IP映射到位置的数据库或服务,例如MaxMind的大地水准面(https://www.maxmind.com/en/geoip-demo)。应该有JavaScript/PHP包装器可用于此类服务,您可以使用这些包装器。
GeoIP查找不是很可靠,而且很容易过时。如果你需要更准确的东西,你必须向用户征求一些信息,比如邮政编码。
调用API下方,使用ip地址获取位置详细信息
http://ip-api.com/json/
限制:IP地址每分钟45次请求
文件:https://ip-api.com/docs/api:json
- 请求准备一个文件并返回路径,允许用户在准备好时下载
- DreamFactory REST API POST休息/用户/会话请求总是在IE9中返回错误
- 如何循环请求用户输入,直到用户在Acrobatneneneba XI中输入信息
- 使用javascript在post请求中传递用户输入变量
- 检查请求的用户是否是django中的所有者
- 在每个 AJAX 请求(Sencha Touch 2)中发送用户详细信息(会话令牌)
- 在设置用户后,从 JavaScript JSON 请求中获取 Web 服务 (asmx) ASP.NET Windows
- 在facebook用户发送邀请请求后调用ajax调用
- 从用户id和电子邮件的.csv文件在facebook上发送好友请求
- URL中用户@的几个请求导致“;违反政策通知;来自Google AdSense
- 当用户在命令提示符中选择任何字符串时,节点Js不为任何请求提供服务
- 可以'在尝试使用chai请求代理为测试维护用户会话时,t在发送标头后设置标头出错
- 检测被用户操作中断的 Ajax 请求
- 如果用户发送另一个请求,请使用 .abort() 取消现有的 ajax 请求
- 获取 ajax 发布请求的用户输入
- 仅在某些请求上保存用户会话
- Javascript/ AngularJS请求用户下载iOS/ Android应用
- 请求用户共享的JS对话框;消息“;参数不起任何作用
- 如何请求用户输入文件位置,以便在Eclipse(Java)程序中使用和读取它
- 当用户点击链接访问另一个网站时,我如何请求用户留下来.但是如果他们想在我的网站上访问另一个页面,则没有要求