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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
vuejs实现下拉框菜单选择
Oct 23 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
Open and Print a Word Document
2007/06/15 Javascript
TopList标签和JavaScript结合两例
2007/08/12 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python卸载模块的方法汇总
2016/06/07 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
一套VC试题
2015/01/23 面试题
Python如何定义一个函数
2015/09/01 面试题
社区优秀志愿者材料
2014/02/02 职场文书
国庆节标语大全
2014/10/08 职场文书
入股协议书范本
2014/11/01 职场文书
2014年保洁工作总结
2014/11/24 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
学校运动会开幕词
2016/03/03 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS