vue中实现高德定位功能

一、获取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() {								 
 1/3    1 2 3 下一页 尾页