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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
详解Angular2响应式表单
Jun 14 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
js生成word中图片处理方法
Jan 06 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
PHP出错界面
2006/10/09 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python 开发Activex组件方法
2009/11/08 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
如何使用python切换hosts文件
2020/04/29 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
一个入门级python爬虫教程详解
2021/01/27 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
关于期中考试的反思
2014/02/02 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
求职自荐信的格式
2014/04/07 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
五一劳动节慰问信
2015/02/14 职场文书
食堂卫生管理制度
2015/08/04 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL