拖拽地图/点坐标定位(高德地图)

法一:使用地图自带的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();
  }

 

posted @ 2022-02-24 16:36  妄欢  阅读(1798)  评论(0编辑  收藏  举报