H5新特性（三）——地理定位

定位基础

常见的地理定位方法：IP定位，运营商基站定位，GPS定位

定位用户的位置：HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

HTML5提供了API用于获取设备的位置信息(经纬度)

如下:

let geoloc = window.navigator.geolocation
let success = function(res){}
let error = function(err){}
let options = {timeout: 5000}
geoloc.getCurrentPosition(success, error, options)

如果定位成功将会返回:

coords: GeolocationCoordinates
    accuracy: 150     精准度
    altitude: null    海拔高度
    altitudeAccuracy: null   海拔精度
    heading: null   
    latitude: 39.930298      纬度
    longitude: 116.393456    经度
    speed: null
timestamp: 1654849618391  时间戳

这个对象有三个常用的方法：

• getCurrentPosition（） 用于获取当前定位信息

• watchPosition（） 不停的监视定位信息的改变

• clearWatch（） 清除监视

常用第三方地图API：

高德地图API文档：https://lbs.amap.com/api/jsapi-v2/summary/

百度地图API文档：https://lbsyun.baidu.com/index.php?title=jspopularGL

腾讯地图API文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview

地图引入页面的步骤：

1. 登录地图服务控制台，如果没有注册过账号，请点击注册按钮注册成为服务开发者

2. 创建应用和Key：

   ​ 进入控制台后，展开应用管理菜单并选择我的应用

   ​ 点击右侧创建应用，如果已经创建过应用，可以直接选择添加Key

3. 新建一个html页面. 创建一个div, 设置好样式, 作为地图容器.

   <div id="container">div> 
   

4. 地图引入页面（高德地图为例）

   <script type="text/javascript">
           window._AMapSecurityConfig = {
               securityJsCode:'您申请的安全密钥',
           }
   script>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值">script> 
   

5. 参考开发文档添加自己需要的功能