整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前面文章中写过类似的文章《手把手教你HTML5实现根据LBS定位到商家两点之间距离多少》，建议有兴趣的小伙伴可以看看。
各种浏览器对HTML5 Geolocation 的支持
浏览器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -
出于安全考虑，部分浏览器只允许通过HTTPS协议使用 Geolocation API。在HTTP协议下使用Geolocation API 浏览器会抛出异常，在开发阶段，127.0.0.1和localhost 等本地域在两种协议下均可使用。
Geolocation API 通过 navigator.geolocation 全局对象进行访问，第一次访问的时候会询问用户是否允许共享位置。
判断浏览器是否支持 Geolocation API
// 判断浏览器属否支持获取位置
if(navigator.geolocation){
console.log("可以获取");
}else{
console.log("不支持");
}
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
获取用户地理位置
<input type="button" value="点击获取位置" id="btn">
<script>
let btnBtn = document.getElementById('btn')
btnBtn.onclick = () => { // 点击事件
getAdd()
}
// 成功回调
let success = (position) => {
console.log(`获取位置成功：${position.coords}`);
console.log(position.coords); // 获取坐标信息
// coords的常用属性
console.log(position.coords.latitude); // 获取坐标纬度
console.log(position.coords.longitude); // 获取坐标经度
console.log(position.coords.accuracy); // 获取坐标精度，单位为米
console.log(position.timestamp); // 获取位置的时间戳
}
// 失败回调
let error = (positionErr) => {
console.log(`获取位置失败：${positionErr.code}+${positionErr.message}`);
}
let options = {
enableHightAccuracy: false, // 获取高精度的位置信息，可能会增加响应时间，默认是false
timeout: 30000, // 设置超时时间，单位毫秒，如果到达设定的时间没获取到信息则回触发失败回调，默认值为0，无限大
maximumAge: 0 // 设置用户位置信息缓存的最大时间
}
let getAdd = () => {
navigator.geolocation.getCurrentPosition(success, error, options)
}
// 判断浏览器属否支持获取位置
if(navigator.geolocation){
console.log("可以获取");
}else{
console.log("不支持");
}
</script>
</body>
</html>
当获取位置失败时，会调用失败回调(error函数)。返回的参数<positionErr.code 标识错误的原因><positionErr.message错误信息描述> positionErr.code 值
《手把手教你HTML5实现根据LBS定位到商家两点之间距离多少》
作者：蓝海00
链接：https://www.jianshu.com/p/d0b0b6120055
久前研究过 HTML5 Geolocation，最近整理 F2E-Awesome 的时候，发现缺少相关的文章，所以按照自己的使用经验整理了此篇文章。
一、应用场景：
请求一个位置信息，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持 HTML5 地理定位功能的底层设备提供给浏览器。位置信息由纬度／经度坐标和一些其他的元数据组成。有了这些位置信息就可以构建引人注意目的位置感知类应用程序。
二、简单示例
我们通过简短的代码先粗略认识一下，大致知道如何使用。
三、兼容性
四、相关 API
三个方法：
1.getCurrentPosition
获取用户当前定位位置，这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。
需要注意的是：有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位，在这种情况下 getCurrentPosition() 会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。
2.watchPosition
您可以设定一个回调函数来响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息），它与 getCurrentPosition() 接受相同的参数，但回调函数会被调用多次。错误回调函数与 getCurrentPosition() 中一样是可选的，也会被多次调用。
3.clearWatch
watchPosition() 函数会返回一个 ID，唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。
navigator.geolocation.clearWatch(watchID);
五、警告
[Deprecation] 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://goo.gl/rStTGz for more details.
在 IOS 10 中，苹果对 webkit 定位权限进行了修改，所有定位请求的页面必须是 https 协议的。如果是非 https 网页，在 http 协议下通过 html5 原生定位接口会返回错误，也就是无法正常定位到用户的具体位置，而已经支持 https 的网站则不会受影响。
六、定位原理
1.IP 定位
每一台连上网路的电脑都具有一个独一无二的 IP 位址，经由 IP 位址可以反查出电脑位置，但是结果并不精确，而且很容易到受到 ISP 的 IP 分配机制影响，而造成误差。
2.GPS 定位
GPS 是我们最常听到的定位技术，它是利用卫星来定位，可以很精确的侦测到使用者位置。但是要玩 GPS，行动装置一定要有 GPS 模组，而且尽管 GPS 非常精准，还是会有技术上的局限，比如在侦测位置时，GPS 的感应器要位于视线范围内（line of sight），因此在有很多高楼大厦、或者是障碍物的地方，GPS 反而没有办法运作自如。
3.Wi-Fi 三角测量定位
这个定位技术可以说是为都会区而设的，因为热闹的大都市通常会有不少 Wi-Fi 热点，定位供应商可以根据这些热点的相对位置、距离等建立一个资料库。Wi-Fi 三角测量适用于 GPS 无法渗透的地方，不过缺点是需要经常更新资料库。
4.基地台三角测量定位
借助基地台之间的相对位置，可以定位出用户在哪里，只要你的手机收得到讯号，就能定位。 一般来说，这四种技术的准确性由高而低分别是：GPS 定位、Wi-Fi 三角测量、基地台三角测量、IP定位。但还是要视环境而定，比如你到没有 Wi-Fi 热点的地方、或是手机信号不好，定位效果当然也会受影响。
位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.
注意:Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度
实例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
*请认真填写需求信息，我们会在24小时内与您取得联系。
