web使用高德地图，经纬度与地址互相转化/获取用户当前地址/位置比对/地理位置选择等

• index.html文件页引入

// 更新之后的高德地图key使用需要配置安全密钥，否则获取时报no_data错误
  <script type="text/javascript">
    window._AMapSecurityConfig = {
    
    
      securityJsCode: '高德地图安全密钥',
    }
  </script>
  <script type="text/javascript"
  src='https://webapi.amap.com/maps?v=1.4.11&key=高德地图key&plugin=AMap.Geolocation,AMap.Geocoder'></script>

• 封装utils方法比对两经纬度之间距离，作定位打开使用

// 经纬度与地址转化
export function limits(location1, location2, width) {
    
    
  // 创建地理编码对象
  let geocoder = new AMap.Geocoder({
    
    
    //city: "北京", // 城市，默认：“全国”
  });
  // 地址解析成经纬度
  geocoder.getLocation(location1, function(status, result) {
    
    
    if (status === 'complete' && result.geocodes.length) {
    
    
      let lnglat1 = result.geocodes[0].location; // 地址1的经纬度
      // 解析第二个地址
      geocoder.getLocation(location2, function(status, result) {
    
    
        if (status === 'complete' && result.geocodes.length) {
    
    
          let lnglat2 = result.geocodes[0].location; // 地址2的经纬度
          // 使用 GeometryUtil 类计算两点之间的直线距离
          let distance = AMap.GeometryUtil.distance(lnglat1, lnglat2);
          console.log("两点之间的距离：" + distance.toFixed(2) + "米");
          if (distance.toFixed(2) - width > 0) {
    
    
            return false
          } else {
    
    
            return true
          }
        } else {
    
    
          console.log("地址2解析失败");
          return false
        }
      });
    } else {
    
    
      console.log("地址1解析失败");
      return false
    }
  });
}

• 经纬度解析成地址

// 本质修改方法getAddress即可
    geocoder.getAddress([lng, lat], function(status, result) {
    
    
      console.log(status, result, 'distance');
      // alert(status);
      if (status === 'complete' && result.info === 'OK') {
    
    
        let address = result.regeocode.formattedAddress;
        resolve(address)
      } else {
    
    
        resolve(false)
      }
    });

• 定位获取用户经纬度以及详细地址等信息

    getLocation (id) {
    
    
      // '定位获取中， 请耐心等待'
      let geolocation = new AMap.Geolocation({
    
    
        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
        timeout: 10000, // 设置定位超时时间，默认：无穷大
        offset: [10, 20],  // 定位按钮的停靠位置的偏移量
        zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        position: 'RB' //  定位按钮的排放位置,  RB表示右下
      })
      geolocation.getCurrentPosition(function(status, result) {
    
    
        console.log(status, result, '111');
        if (status == 'complete') {
    
    
          // result是具体的定位信息
          // '定位成功！点击左上角返回'
          let newCity = result.formattedAddress // 详细地址
          let location = result.position.lng + ',' + result.position.lat // 经纬度
        } else {
    
    
          // '定位失败！请返回后重新定位'
        }
      });

• 经纬度回显展开地图位置

<div id="map-container"></div>
// 若非弹窗格式打开地图div，则无需setTimeout等待div创建完成
// lng, lat为经纬度
setTimeout(() => {
    
    
  const map = new AMap.Map('map-container', {
    
    
    viewMode: '3D',
    zoom: 16,
    center: [lng, lat],
  });
  // 创建一个Marker对象，并设置它的位置和文本标注
  let marker = new AMap.Marker({
    
    
    position: [lng, lat],
    title: '这里是我的位置'
  });
  // 将Marker添加到地图上
  marker.setMap(map);
}, 0);

• 地理位置自定义选择，获取经纬度和详细地址

 <avue-input-map :params="params" 
 :placeholder="placeholder" 
 v-model="locationInfo">
 </avue-input-map>
 // locationInfo格式为数组第0，1为经纬度，第2为详细地址
 //高德初始化参数
  params: {
    
    
    zoom: 10,
    zoomEnable: true, // 地图是否可缩放
    dragEnable: true, // 地图是否可拖动
  },
  // 事件 @change 
 // change(e) // 数据为 locationInfo