用户登录
用户注册

分享至

vue中实现高德定位功能

  • 作者: 神一样的精神
  • 来源: 51数据库
  • 2021-09-21

一、获取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中实现高德定位功能,希望对大家有所帮助

软件
前端设计
程序设计
Java相关