第一种:通过h5自带定位获取当前gps坐标第一种:通过h5自带定位获取当前gps坐标 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; alert(crd.latitude+'---'+crd.longitude+'---'+crd.accuracy); console.log(`经度:${crd.latitude}`); console.log(`纬度:${
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
alert(crd.latitude+'---'+crd.longitude+'---'+crd.accuracy);
console.log(`经度:${crd.latitude}`);
console.log(`纬度:${crd.longitude}`);
console.log(`误差:${crd.accuracy} 米`);
}
function error(err) {
console.log(err);
alert(err);
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
第二种:通过野生接口获取(不推荐)因为如果平时用着玩没问题,一旦部署会引起跨域问题,需要后端或平台将接口添加白名单,另外的缺点是不稳定
request({
url: 'http://ipwho.is/', // 野生gps定位接口
method: 'get',
}).then(res => {
this.CountryOptions.forEach((item, index) => {
if (item.remark) {
let remark = JSON.parse(item.remark);
if (remark.en_code_short == res.country_code) {
this.countryName = remark.cn_name_short;
}
}
})
this.locations.lat = res.latitude;
this.locations.lng = res.longitude
})
第三种:通过平台提供的位置定位api(需要鉴权)本项目为移动端项目,发布到welink平台中进行测试,本次定位使用了平台提供的api,由于定位获取需要用户手动给权限,所以需要做鉴权处理,使用方式详见官方手册。
//地图加载
handler({
BMap,
map
}) {
this.BMap = BMap
this.map = map
this.center = ''
this.zoom = 15;
const formData = new FormData(); // formData 格式参数
formData.append('url', window.location.href);
JSAPI(formData).then(response =>{ // 请求后台接口 获取鉴权信息
// 进行鉴权
HWH5.config({
appId: response.data.appId, // 应用的client_id
timestamp: response.data.timestamp, // 与生成签名一致的时间戳,精确到秒十位
noncestr: response.data.noncestr, // 服务端使用的随机串
signature: response.data.signature, // 签名信息
jsApiList: ['getLocation']
})
/* 如果鉴权成功,会执行ready方法,把需要在页面加载时调用的相关接口放在ready中确保执行。
需要用户触发时才调用的接口,则直接调用,不需要放在ready函数中。*/
HWH5.ready(() => {
console.log('鉴权成功---');
HWH5.getLocation({ type: 1 }).then(res => {
console.log(res,'getLocationgetLocation');
// 处理数据
this.CountryOptions.forEach((item, index) => {
if (item.remark != undefined) {
if (JSON.parse(item.remark).cn_name_short == res.country) {
this.countryName = item.dictLabel;
this.countryCode = JSON.parse(item.remark).en_code_short
}
}
})
this.lat = res.latitude;
this.lng = res.longitude;
this.locations.lng = this.lng;
this.locations.lat = this.lat;
// 定点
const BMapGL = this.BMap
this.point = new BMapGL.Point(this.locations.lng, this.locations.lat)
const marker = new BMapGL.Marker(this.point)
map.addOverlay(marker)
const geoc = new BMapGL.Geocoder()
console.log(this.point, 300);
geoc.getLocation(this.point, (rs) => {
const addressComp = rs.addressComponents
this.Address = addressComp.province + addressComp.city + addressComp.district +
addressComp.street + addressComp.streetNumber;
console.log(rs, 909);
})
}).catch(error => {
console.log('获取位置信息异常', error);
});
});
// 如果鉴权失败,则调用error方法
HWH5.error(err => {
console.log('鉴权失败---', err);
});
})
},
沃梦达教程
本文标题为:gps定位坐标获取的几种方式
基础教程推荐
猜你喜欢
- django ajax提交评论并自动刷新功能的实现代码 2023-02-14
- 如何避免常见的6种HTML5错误用法 2022-09-16
- uniapp下单选框的实现方法详解 2022-10-22
- Ajax实现三级联动效果 2023-02-23
- javascript的onchange事件与jQuery的change()方法比较 2023-12-01
- javascript实现获取浏览器版本、操作系统类型 2023-12-03
- Vue-router中hash模式与history模式的区别详解 2024-03-20
- ajax和jsonp跨域的原理本质详解 2023-02-14
- jQuery AJAX回调函数this指向问题 2024-02-09
- vue项目使用websocket技术 2023-10-08