使用vue框架的H5项目通过（百度地图和腾讯地图）自动获取经纬度的解决方法

凌儿~

已于 2024-01-11 14:41:45 修改

阅读量828

点赞数 5

分类专栏：前端项目问题记录文章标签： vue.js 百度前端

于 2024-01-11 14:14:32 首次发布

本文链接：https://blog.csdn.net/rhcjqmm666/article/details/135527091

版权

前端项目问题记录专栏收录该内容

18 篇文章 0 订阅

订阅专栏

亲测： 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)}`);
    },
}