本章主要介绍高德JS API提供的多种获取定位信息的方式,包括:
- 地图初始化加载定位到当前城市
- 浏览器定位
- IP定位获取当前城市信息
地图初始化加载定位到当前城市
创建AMap.Map对象时如果没有传入center参数,您会发现地图将自动定位到您所在城市并显示,这就是JS API的初始加载定位:无需传入对应参数就能获取大致的定位信息。以下代码运行后将显示您所在城市的地图:JavaScript
var map = new AMap.Map('container', {
resizeEnable: true
})
浏览器定位
地图初始化加载的定位只能获取到城市级别信息,如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位,使用方式如下:JavaScript
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete)
AMap.event.addListener(geolocation, 'error', onError)
function onComplete (data) {
// data是具体的定位信息
}
function onError (data) {
// 定位出错
}
})
高德JS API提供的浏览器定位接口,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。如果定位失败或者遇到其它问题,请参考这篇FAQ:Geolocation的定位流程以及定位失败的原因。
IP定位获取当前城市信息
如果不需要获取精确的位置,只需要城市级别的定位信息,推荐使用AMap.CitySearch
插件,AMap.CitySearch
插件获取所在城市相比通过浏览器定位的方式也更快捷。
使用CitySearch
插件获取当前所在城市信息代码如下:JavaScript
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功,result即为当前所在城市信息
}
})
})
一些注意事项
定位一般分为两种场景:移动端和PC,下面分别讲下这两个场景在使用定位过程中的一些注意事项。
移动端
移动端包括手机,pad和其它带有GPS定位芯片的智能设备(如手表、音箱等),移动端的系统包括iOS和Android。成功完成定位需要达成以下前提条件:
- 系统GPS打开
- 所使用的App或浏览器已获取定位权限
- 对打开的页面允许使用定位
- 对于iOS10以上系统和Android的一些版本已禁止在非HTTPS协议的域名下定位,请尽快将站点升级到HTTPS
注意,以上只是定位成功的前提条件,满足这些并不一定等于可以成功定位,定位还与当前位置(室内会影响GPS信息)、手机信号和定位权限等因素影响。如果您在使用过程中定位失败,可以参考FAQ:Geolocation的定位流程以及定位失败的原因 ,将失败信息通过工单发送给我们,高德的工程师将协助您解决问题。
PC
因为pc设备上大都缺少GPS芯片,所以在PC上的定位主要通过IP精准定位服务,该服务的失败率在5%左右。
定位失败
如果定位失败或者遇到其它问题,请参考FAQ:Geolocation的定位流程以及定位失败的原因 ,将失败信息通过工单发送给我们,高德的工程师将协助您解决问题。