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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 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常用函数小技巧
2008/09/11 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
wxPython实现文本框基础组件
2019/11/18 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python线程threading模块用法详解
2020/02/26 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
工程专业求职自荐书范文
2014/02/08 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
走进敬老院活动总结
2014/07/10 职场文书
认错检讨书
2014/10/02 职场文书
2015年体育部工作总结
2015/04/02 职场文书
总结几个非常实用的Python库
2021/06/26 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA