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


    法一:使用地图自带的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();
      }
  • 相关阅读:
    建立自己的影响力
    在病房垒代码
    知乎确实不错
    不在乎你用到了什么技术,而在于你提供了哪些有价值的东西
    oschina上有不少好的项目
    我为何坚守Java?
    掌握了学习方法才能学到更多知识
    Jrebel实现Jetty 热部署
    互联网到底能干什么?我们还能干些什么?
    centos 阿里云 安装VNC Viewer
  • 原文地址:https://www.cnblogs.com/wanghuanl/p/15932443.html
Copyright © 2020-2023  润新知