使用vue框架的H5项目通过(百度地图和腾讯地图)自动获取经纬度的解决方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
亲测: https协议才能精准定位(位置更精准),http协议的项目存在获取失败及经纬度偏差大的问题
注意 :小距离偏差可能是坐标系导致的
- 高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系
- 百度地图使用的是BD-09坐标系
- 底层接口(HTML5 Geolocation或ios、安卓API)通过GPS设备获取的坐标使用的是WGS-84坐标系
不同的坐标系之间可能有几十到几百米的偏移,所以在开发基于地图的产品,或者做地理数据可视化时,我们需要修正不同坐标系之间的偏差。
坐标转换工具地址:https://tool.lu/coordinate/
经纬度查询工具地址:http://jingweidu.757dy.com/
百度地图
申请ak地址 :https://lbsyun.baidu.com/apiconsole/key#/home
参考百度文档地址:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/geoloaction
本示例使用百度文档中的浏览器定位
1、引用百度地图API文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=your ak"></script> //替换自己的ak
2、页面调用
mounted() {
this.lib_getPosition(); //百度
},
methods: {
lib_getPosition() {
const BMap = window.BMapGL;
const BMapGeolocation = new BMap.Geolocation();
BMapGeolocation.getCurrentPosition(r => {
if (r.latitude && r.longitude) {
console.log("baidu", r);
alert(`百度成功-${JSON.stringify(r)}`);
// 获取到经纬度(百度转换高德经纬度)
} else {
console.log(22);
}
});
},
}
腾讯地图
申请key地址:https://lbs.qq.com/dev/console/application/mine
参考腾讯文档地址:https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation
本示例使用腾讯文档中的调用方式一
1、引用腾讯地图API文件
<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
2、页面调用
mounted() {
this.getUserLocation(); //腾讯
},
methods: {
getUserLocation() {
console.log(88);
let geolocation = new qq.maps.Geolocation(
"your key",//替换自己的key
"myAPP"
);
geolocation.getLocation(this.showPosition, this.errorPosition); //开启定位
},
//成功返回的信息,挑取自己所需要的
showPosition(position) {
console.log(11111);
this.lat = position.lat;
this.lng = position.lng;
var location = position.lat + "," + position.lng;
console.log(location, "location");
alert(`腾讯成功1-${JSON.stringify(position)}`);
},
// 定位失败 继续尝试定位
errorPosition(e) {
console.log(e, "定位失败,再次进行定位");
alert(`腾讯失败1-${JSON.stringify(e)}`);
},
}
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)