vue中实现高德定位功能

 更新时间:2019年12月03日 10:17:29   作者:寂寞花如雪  
这篇文章主要介绍了vue中实现高德定位功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

一、获取key及在index.htm中引入

首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script>

二、在配置文件中进行相应配置

根据vue脚手架的不用需要在不同的文件中进行配置。

我项目使用的是cli3的脚手架,需要在Vue.config.js中进行高德地图配置

externals: {
  'AMap': 'AMap' // 高德地图配置
 }

三、在需要用到的地方进行地图初始化及定位操作

因项目需求只需要在注册页面进行默认定位,故只引用一次就行。并没有单独的抽离出来,可以根据项目的需求进行抽离。

import AMap from "AMap"; // 引入高德地图

data() {
  // debugger
  return {
    locationData: {
     // 用于定位相关信息提交
     lat: "", // 纬度
    lon: "", // 经度
     province: "", // 省
     city: "", // 市
     district: "", // 区 县
     nowPlace: "", // 省-市-区
     Address: "" // 详细地址
    }
  };
 },
methods:{
 getLocation() {
   const self = this;
   AMap.plugin("AMap.Geolocation", function() {
    var geolocation = new AMap.Geolocation({
     enableHighAccuracy: true, // 是否使用高精度定位,默认:true
     timeout: 10000, // 超过10秒后停止定位,默认:无穷大
     maximumAge: 0, // 定位结果缓存0毫秒,默认:0
     convert: true // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
    });

    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, "complete", onComplete);
    AMap.event.addListener(geolocation, "error", onError);

    function onComplete(data) {
     // data是具体的定位信息
     // debugger
     console.log("定位成功信息:", data);
     self.newGetAddress(data.position.lat, data.position.lng);
    }

    function onError(data) {
     // debugger
     // 定位出错
     console.log("定位失败错误:", data);
     self.getLngLatLocation();
    }
   });
  },
  getLngLatLocation() {
   const self = this;
   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);
      //逆向地理编码
      AMap.plugin("AMap.Geocoder", function() {
       var geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
        city: result.adcode
       });

       var lnglat = result.rectangle.split(";")[0].split(",");

       geocoder.getAddress(lnglat, function(status, data) {
        if (status === "complete" && data.info === "OK") {
         // result为对应的地理位置详细信息
         console.log(data);
         self.userInfo.ProvinceName = data.regeocode.addressComponent.province.toString();
         self.userInfo.CCityName =
          data.regeocode.addressComponent.city;
         self.userInfo.RegionName =
          data.regeocode.addressComponent.district;
        }
       });
      });
     }
    });
   });
  },
  newGetAddress: function(latitude, longitude) {
   const _thisSelf = this;
   _thisSelf.locationData.lat = latitude;
   _thisSelf.locationData.lon = longitude;
   const mapObj = new AMap.Map("mapAmap1");
   mapObj.plugin("AMap.Geocoder", function() {
    const geocoder = new AMap.Geocoder({
     city: "全国", // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
     radius: 100 // 以已知坐标为中心点,radius为半径,返回范围内兴趣点和道路信息
    });
    const lnglat = [longitude, latitude]; // 倒序反写经纬度
    // 天津120 北京110 上海310 重庆500 ,
    const reg1 = /^[1][1][0][0-9][0-9][0-9]/;
    const reg2 = /^[1][2][0][0-9][0-9][0-9]/;
    const reg3 = /^[5][0][0][0-9][0-9][0-9]/;
    const reg4 = /^[3][1][0][0-9][0-9][0-9]/;
    geocoder.getAddress(lnglat, function(status, result) {
     console.log("getAddress", result);
     if (status === "complete" && result.info === "OK") {
      // result为对应的地理位置详细信息
      const adcode = result.regeocode.addressComponent.adcode; // 省市编码
      if (
       reg1.test(adcode) ||
       reg2.test(adcode) ||
       reg3.test(adcode) ||
       reg4.test(adcode)
      ) {
       _thisSelf.locationData.city =
        result.regeocode.addressComponent.province;
      } else {
       _thisSelf.locationData.city =
        result.regeocode.addressComponent.city;
      }
      // 提取 省 市 区 详细地址信息 重拼装省-市-区信息
      _thisSelf.locationData.province =
       result.regeocode.addressComponent.province;
      _thisSelf.locationData.district =
       result.regeocode.addressComponent.district;
      _thisSelf.locationData.Address = result.regeocode.formattedAddress;
      _thisSelf.locationData.nowPlace =
       result.regeocode.addressComponent.province +
       result.regeocode.addressComponent.city +
       result.regeocode.addressComponent.district;
      _thisSelf.userInfo.ProvinceName = _thisSelf.locationData.province;
      _thisSelf.userInfo.CCityName = _thisSelf.locationData.city;
      _thisSelf.userInfo.RegionName = _thisSelf.locationData.district;
     } else {
      console.log(_thisSelf.locationData); // 回调函数
     }
    });
   });
  }
},
 created() {
  this.getLocation();
 }

至此整个定位的实现全部结束,可以准确的获取到当前所在的省市区。

总结

以上所述是小编给大家介绍的vue中实现高德定位功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 使用Vue3+ElementPlus前端实现分片上传的全过程

    使用Vue3+ElementPlus前端实现分片上传的全过程

    ElementPlus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的组件库,提供了配套设计资源,帮助你的网站快速成型,下面这篇文章主要给大家介绍了关于使用Vue3+ElementPlus前端实现分片上传的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue中实现上传文件给后台实例详解

    vue中实现上传文件给后台实例详解

    在本文里小编给大家分享了一篇关于vue中实现上传文件给后台的实例内容,有需要此功能的可以学习参考下。
    2019-08-08
  • vue实现轮播图帧率播放

    vue实现轮播图帧率播放

    这篇文章主要为大家详细介绍了vue实现轮播图帧率播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    这篇文章主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue实现控制商品数量组件封装及使用

    Vue实现控制商品数量组件封装及使用

    这篇文章主要为大家详细介绍了Vue实现控制商品数量组件的封装及使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue实现动态路由详细

    vue实现动态路由详细

    我们开发后台管理系统过程中,会由不同的人操作系统,有admin(管理员)、superAdmin(超管),及各种运营、财务人员。为了区别这些人员,会给不同的人分配不一样的角色来展示不同的菜单,这就必须要通过动态路由来实现。下面就来介绍vue实现动态路由,需要的朋友可参考一下
    2021-10-10
  • iphone刘海屏页面适配方法

    iphone刘海屏页面适配方法

    这篇文章主要介绍了iphone刘海屏页面适配方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue WatchEffect函数创建高级侦听器

    Vue WatchEffect函数创建高级侦听器

    watchEffect传入的函数会被立即执行一次,并且在执行的过程中会收集依赖;其次,只有收集的依赖发生变化时,watchEffect传入的函数才会再次执行
    2023-03-03
  • Vue中插槽slot的使用方法与应用场景详析

    Vue中插槽slot的使用方法与应用场景详析

    这篇文章主要给大家介绍了关于Vue中插槽slot的使用方法与应用场景的相关资料,插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,需要的朋友可以参考下
    2021-06-06
  • element-ui upload组件多文件上传的示例代码

    element-ui upload组件多文件上传的示例代码

    这篇文章主要介绍了element-ui upload组件多文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论