vue 使用高德开放平台获取经纬度
// 高德 获取经纬度信息
getLocation () {
const _this = this
const AMap = window.AMap
AMap.plugin(\'AMap.Geolocation\', function () {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, \'complete\', onComplete)
AMap.event.addListener(geolocation, \'error\', onError)
function onComplete (data) {
console.log(\'定位成功纬度信息:\', data.position.lat)
console.log(\'定位成功经度信息:\', data.position.lng)
_this.latitude = data.position.lat
_this.longitude = data.position.lng
_this.getmarketposition()
}
function onError (data) {
// console.log(\'定位失败错误:\', data)
_this.getmarketposition()
}
})
}
// h5原生 获取经纬度信息
navigator.geolocation的三个方法:
1. getCurrentPosition()
2. watchPosition()
3. clearWatch()
getCurrentPosition()
使用方法:navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
A) successCallback 获取定位成功时执行的回调函数 eg: function(position){alert("纬度:"+position.coords.latitude+";经度:"+position.coords.longitude)};
successCallback返回一个地理数据对象position作为参数,该对象有属性timestamp和coords。timestamp表示该地理数据创建时间(时间戳);coords包括另外七个属性:
1. coords.latitude:估计纬度
2. coords.longitude:估计经度
3. coords.altitude:估计高度
4. coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度
5. coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度
6. coords.heading: 宿主设备当前移动的角度方向,相对于正北方向顺时针计算
7. coords.speed:以米每秒为单位的设备的当前对地速度
PS:firefox下还有address属性,可以获取详细地址,不过我得到的地址是错误的,使用方法:position.address.city,具体如下:
address属性
B) errorCallback 定位失败时执行的回调函数 eg: function(error){alert(error.message);}
errorCallback返回一个错误数据对象error作为参数,该对象有属性:
1.code :表示失败原因,返回1 or 2 or 3 ,具体为
PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API
POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置,例如一个或多个的用于定位采集程序报告了一个内部错误导致了全部过程的失败
TIMEOUT (数值为3) 表示超时
详情查看 http://dev.w3.org/geo/api/spec-source.html#permission_denied_error
2.message :错误提示内容
C) positionOptions 用来设置positionOptions来更精细的执行定位,positionOptions拥有三个属性{enableHighAccuracy:boolean , timeout:long , maximumAge:long}。
enableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构,默认为false不启用,选择true则启用,但是会导致较长的响应时间及增加功耗,这种情况更多的用在移动设备上。
timeout 设备位置获取操作的超时时间设定(不包括获取用户权限时间),单位为毫秒,如果在设定的timeout时间内未能获取位置定位,则会执行errorCallback()返回code(3)。如果未设定timeout,那么timeout默认为无穷大,如果timeout为负数,则默认timeout为0。
maximumAge 设定位置缓存时间,以毫秒为单位,如果不设置该值,该值默认为0,如果设定负数,则默认为0。该值为0时,位置定位时会重新获取一个新的位置对象;该值大于0时,即从上一次获取位置时开始,缓存位置对象,如果再次获取位置时间不超过maximumAge,则返回缓存中的位置,如果超出maximumAge,则重新获取一个新的位置。
原生h5经纬度不是很高,推荐使用高德
有人说也准
https://www.jianshu.com/p/03440a413903
// h5 获取经纬度 在百度地图使用时 需注意的地方
html5原生的定位API获取到的地理位置,是未经加密的。
因此,为了保证html5原生的定位API获取到的地理位置在百度地图上较为准确的解析,就需要用官方提供的转换类。
由于国内地图产品的地理位置普遍进行了GCJ-02加密
因此,在用一种地图产品的API时,都应养成一个习惯,就是看看它们有没有提供地理位置信息转换的类。
所以,用geolocation获取的经纬度直接用误差会很大,要进行转换,百度地图提供了这个方法 ,Convertor()。
代码详见下面
参考
https://blog.csdn.net/qq_34437587/article/details/74936050
注:
1、百度 及 腾讯位置,均与此类似
2、切记 更改this指向问题
3、h5自带 navigaor.geolocation 会有经度不是很准确的问题
参考
https://blog.csdn.net/weixin_46533797/article/details/105854263
https://www.cnblogs.com/lecaf/archive/2011/08/01/2123593.html
https://www.cnblogs.com/jshare/p/7066154.html