vue中实现高德定位功能


Posted in Javascript onDecember 03, 2019

一、获取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中实现高德定位功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
vue组件实例解析
Jan 10 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 #Javascript
js实现时分秒倒计时
Dec 03 #Javascript
Vue实现验证码功能
Dec 03 #Javascript
JS实现压缩上传图片base64长度功能
Dec 03 #Javascript
js实现AI五子棋人机大战
May 28 #Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 #Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Django Admin实现上传图片校验功能
2016/03/06 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
django API 中接口的互相调用实例
2020/04/01 Python
python如何代码集体右移
2020/07/20 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Python 内存管理机制全面分析
2021/01/16 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
北体毕业生求职信
2014/02/28 职场文书
社保委托书怎么写
2014/08/02 职场文书
标准单位租车协议书
2014/09/23 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
捐款仪式主持词
2015/07/04 职场文书
老人节主持词
2015/07/04 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android