定位基础
常见的地理定位方法: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
地图引入页面的步骤:
-
登录地图服务控制台,如果没有注册过账号,请点击注册按钮注册成为服务开发者
-
创建应用和Key:
进入控制台后,展开应用管理菜单并选择我的应用
点击右侧创建应用,如果已经创建过应用,可以直接选择添加Key
-
新建一个
html
页面. 创建一个div, 设置好样式, 作为地图容器.<div id="container"></div>
-
地图引入页面(高德地图为例)
<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'您申请的安全密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
-
参考开发文档添加自己需要的功能