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

2019年9月16日 212次阅读 来源: DemoH

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

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

首先在 index.html 里面 引入

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

然后 去你需要获取的页面 开始写, 我这里拿来测试用,所以只有一个App.vue 文件。
《记录 vue 实现Web端的定位功能 获取经纬度》

貌似已经 很详细了。
通过调用谷歌的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定位， 稍有偏差，但不会超级大，但是在其他浏览器 可以实现精确定位。

具体原因 还没有解决， 希望大佬们， 可以提出建议 意见咯。

本人小菜鸡一枚， 希望结识各路大佬~~~~

另外可以相互学习哟， 这里有个 杠精群, 既可以讨论经验技术,又可以 吹牛嗷：
《记录 vue 实现Web端的定位功能 获取经纬度》

    原文作者：DemoH
    原文地址: https://segmentfault.com/a/1190000020009344
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞