记录 vue 实现Web端的定位功能 获取经纬度

首先我这里的需求呢, 是获取当前用户的经纬度
通过无数次的测试, 前后用了 腾讯/百度地图的api，最后绝对仍是高德的js APi
废话很少说, 直接上代码。

首先在 index.html 里面 引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>

而后 去你须要获取的页面 开始写, 我这里拿来测试用,因此只有一个App.vue 文件。

貌似已经 很详细了。
经过调用谷歌的api 能够实现 准肯定位，

function onComplete(data){
 // 这里面是 容许获取位置服务后 发生的事情,这里我直接获取想要的信息
}

function onError(data){
  // 这里面是获取定位失败后, 执行的事情,
  // 这里我设置的是获取失败后， 启用ip 定位
  // 可是有一点嗷，就是不太准确, 并且安卓微信上 通过测试,只能走这里 。
}

下面上完整代码：

methods: {
    getLocation() {
      let _this = this;
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 5000,
        })
        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', onComplete);
        AMap.event.addListener(geolocation, 'error', onError);
        // data是具体的定位信息
        function onComplete(data) {
          console.log('具体的定位信息',data)
        }
        function onError(data) {
          // 失败 启用 ip定位
          AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                  // 查询成功，result即为当前所在城市信息
                console.log('经过ip获取当前城市：', result)
              }
            })
          })
        }
      })
    },
  },
  created () {
    // 此处为调用精肯定位以后，调取ip定位，可根据实际状况改写
    this.getLocation();
 }

通过测试：

ios机型，在微信内置浏览器 或 其余浏览器 能够完美 精肯定位

安卓机型， 在微信内置浏览器 显示定位失败， 转为ip定位， 稍有误差，但不会超级大，可是在其余浏览器 能够实现精肯定位。

具体缘由 尚未解决， 但愿大佬们， 能够提出建议 意见咯。

本人小菜鸡一枚， 但愿结识各路大佬~~~~

另外能够相互学习哟， 这里有个 杠精群, 既能够讨论经验技术,又能够 吹牛嗷：