资讯专栏INFORMATION COLUMN

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

roadtogeek / 2733人阅读

摘要:通过调用谷歌的可以实现准确定位,这里面是允许获取位置服务后发生的事情这里我直接获取想要的信息这里面是获取定位失败后执行的事情这里我设置的是获取失败后,启用定位但是有一点嗷,就是不太准确而且安卓微信上经过测试只能走这里。

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

首先在 index.html 里面 引入

然后 去你需要获取的页面 开始写, 我这里拿来测试用,所以只有一个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定位, 稍有偏差,但不会超级大,但是在其他浏览器 可以实现精确定位。

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

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

另外可以相互学习哟, 这里有个 杠精群, 既可以讨论经验技术,又可以 吹牛嗷:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106538.html

相关文章

  • Javascript学习总结 - html5实现定位地理位置

    摘要:草案的前身名为,于年被提出,于年被接纳,并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日,万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。 简述 最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能。 html5 什...

    Fundebug 评论0 收藏0
  • Javascript学习总结 - html5实现定位地理位置

    摘要:草案的前身名为,于年被提出,于年被接纳,并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日,万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。 简述 最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能。 html5 什...

    layman 评论0 收藏0
  • Javascript学习总结 - html5实现定位地理位置

    摘要:草案的前身名为,于年被提出,于年被接纳,并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日,万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。 简述 最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能。 html5 什...

    impig33 评论0 收藏0
  • Javascript学习总结 - html5实现定位地理位置

    摘要:草案的前身名为,于年被提出,于年被接纳,并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日,万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。 简述 最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能。 html5 什...

    y1chuan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<