拖拽地圖/點坐標定位（高德地圖）

法一：使用地圖自帶的UI庫

 <div class="mapShow">
        <el-amap vid="amap" :events="events" :center="center" :zoom="zoom" :amap-manager="amapManager" map-style="amap://styles/fresh">
        </el-amap>
      </div>

private zoom: number = 16;
  private center: any = [119.72498, 30.235328];
  private amapManager = new AMapManager();
  private events: any = {
    init: (o: any) => {
      this.getLngLat(); // 地圖加載完成時先定位一次
      this.drag();
    },
  };

     private getLngLat() {
    const map = this.amapManager.getMap();
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默認:true
      timeout: 5000, // 超過10秒后停止定位，默認：5s
      showButton: true,
      buttonPosition: 'RT', // 定位按鈕的停靠位置
      buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
      zoomToAccuracy: true, // 定位成功后是否自動調整地圖視野到定位點
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition((status: string, result: any) => {
      if (status === 'complete') {
        this.onComplete(result);
      } else {
        this.onError(result);
      }
    });
  }
  // 獲取位置成功
  private onComplete(data: any) {
    const Map = this.amapManager.getMap();
    const center = [data.position.lng, data.position.lat];
    const LngLat = this.gcj02_To_Wgs84_exact(center[1], center[0]);
    this.lng = LngLat[1];
    this.lat = LngLat[0];
  }
  // 解析定位錯誤信息
  private onError(data: any) {
    dd.device.notification.toast({
      text: '失敗了', // 提示信息
      duration: 0.5,
    });
  } 

  // 拖拽定位

  private drag() {

    const Map = this.amapManager.getMap();

    AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker: any) => {

      const positionPicker = new PositionPicker({

        mode: 'dragMap', // 如果要改為拖拽點位則為'dragMarker'

        map: Map,

        iconStyle: { // 自定義外觀

            url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',

            ancher: [24, 40],

            size: [48, 48],

        },

      });

      positionPicker.on('success', (positionResult: any) => {

        this.onComplete(positionResult);

        // console.log(positionResult.position.lng);

      });

      positionPicker.on('fail', (positionResult: any) => {

        this.onError(positionResult);

      });

      positionPicker.start();

      // Map.panBy(0, 1);

    });

  }

方法二：監聽地圖移動，移動結束后獲取center添加點標記 （如需要改成拖拽點標記可監聽點標記的移動。）

      <div class="mapShow">
        <el-amap vid="amap" :events="events" :center="center" :zoom="zoom" :amap-manager="amapManager" map-style="amap://styles/fresh">
        </el-amap>
      </div>
  private zoom: number = 16;
  private center: any = [119.72498, 30.235328];
  private amapManager = new AMapManager();
  private events: any = {
    init: (o: any) => {
      this.getLngLat();
      this.addMarker();
      this.dragMap();
    },
  };
  // 設置初始坐標
  private points: any = [
    {
      lng: '120.724906',
      lat: '31.237354',
    },
  ];
// 聲明一個數組來存儲點標記組
  private marker: any = [];
  // 獲取當前位置
  private getLngLat() {
    const map = this.amapManager.getMap();
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默認:true
      timeout: 5000, // 超過10秒后停止定位，默認：5s
      showButton: true,
      buttonPosition: 'RT', // 定位按鈕的停靠位置
      buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
      zoomToAccuracy: true, // 定位成功后是否自動調整地圖視野到定位點
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition((status: string, result: any) => {
      if (status === 'complete') {
        this.onComplete(result);
      } else {
        this.onError(result);
      }
    });
  }
  // 獲取位置成功
  private onComplete(data: any) {
    const Map = this.amapManager.getMap();
    const center = [data.position.lng, data.position.lat];
    const LngLat = this.gcj02_To_Wgs84_exact(center[1], center[0]);
    this.lng = LngLat[1];
    this.lat = LngLat[0];
  }
  // 解析定位錯誤信息
  private onError(data: any) {
    dd.device.notification.toast({
      text: '失敗了', // 提示信息
      duration: 0.5,
    });
  }
  private addMarker() {
    const {points} = this;
    const map = this.amapManager.getMap();
    const amp = AMap as any;
    points.forEach((v: any) => {
      const markerContent = `<div class="icon active"></div>`;
      const marker = new amp.Marker({
        position: [v.lng, v.lat],
        content: markerContent,
        extData: {
          lng: v.lng,
          lat: v.lat,
          name: v.name,
          content: v.content,
        },
      });
      this.marker.push(marker);
      map.add(marker);
    });
  }
  // 監聽地圖移動
  private dragMap() {
    const map = this.amapManager.getMap();
    map.on('moveend', this.mapMoveend); // 移動結束觸發
  }
  private mapMoveend() {
    const map = this.amapManager.getMap();
    map.remove(this.marker);
    const center = map.getCenter();
    console.log(center.lng);
    this.points[0].lng = center.lng;
    this.points[0].lat = center.lat;
    this.addMarker();
  }