riku
2025-04-25 4a836815f12e8ba717702cc8ed431e1b4f96134c
src/components/map/MapSearch.vue
@@ -1,9 +1,16 @@
<template>
  <el-dialog v-model="dialogShow" width="70%" destroy-on-close>
  <el-dialog
    class="dialog"
    v-model="dialogShow"
    width="70%"
    destroy-on-close
  >
    <template #header>
      <div> 坐标拾取</div>
      <div>坐标拾取</div>
    </template>
    <div class="fy-tip-red">左键点击地图选取坐标点,或者根据关键字搜索地点</div>
    <div class="fy-tip-red">
      左键点击地图选取坐标点,或者根据关键字搜索地点
    </div>
    <el-row>
      <el-col :span="10">
        <el-form
@@ -45,11 +52,14 @@
          <span>{{ searchResult.address }}</span>
          <div>
            <span>{{
              searchResult.lon + ', ' + searchResult.lat
              '高德:' + searchResult.lon + ', ' + searchResult.lat
            }}</span>
            <el-divider direction="vertical" />
            <span>{{
              searchResult.gpsLon + ', ' + searchResult.gpsLat
              'GPS:' +
              searchResult.gpsLon +
              ', ' +
              searchResult.gpsLat
            }}</span>
          </div>
        </div>
@@ -94,7 +104,10 @@
    };
  },
  props: {
    show: Boolean
    // 对话框显示隐藏
    show: Boolean,
    // 默认搜索点经纬度,[lng, lat]
    defaultCoor: Array
  },
  data() {
    return {
@@ -146,29 +159,21 @@
        geocoder = new AMap.Geocoder({
          city: '上海' // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
        });
        if (this.defaultCoor) {
          const [lng, lat] = baseMapUtil.wgs84togcj02(
            this.defaultCoor[0],
            this.defaultCoor[1]
          );
          const lnglat = new AMap.LngLat(lng, lat);
          this.setMarker(lnglat);
          this.getAddress(lnglat);
          this.map.setFitView();
        }
        this.map.on('click', (ev) => {
          // this.formObj.lon = ev.lnglat.getLng();
          // this.formObj.lat = ev.lnglat.getLat();
          this.map.clearMap();
          const marker = new AMap.Marker({
            position: ev.lnglat
          });
          this.map.add(marker);
          geocoder.getAddress(ev.lnglat, (status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              this.searchResult.address =
                result.regeocode.formattedAddress;
              this.searchResult.lon = ev.lnglat.getLng();
              this.searchResult.lat = ev.lnglat.getLat();
              const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84(
                this.searchResult.lon,
                this.searchResult.lat
              );
              this.searchResult.gpsLon = gpsLon;
              this.searchResult.gpsLat = gpsLat;
            }
          });
          this.setMarker(ev.lnglat);
          this.getAddress(ev.lnglat);
        });
      });
      // inited = true;
@@ -199,6 +204,29 @@
        }
      });
    },
    getAddress(lnglat) {
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.searchResult.address =
            result.regeocode.formattedAddress;
          this.searchResult.lon = lnglat.getLng();
          this.searchResult.lat = lnglat.getLat();
          const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84(
            this.searchResult.lon,
            this.searchResult.lat
          );
          this.searchResult.gpsLon = gpsLon;
          this.searchResult.gpsLat = gpsLat;
        }
      });
    },
    setMarker(lnglat) {
      this.map.clearMap();
      const marker = new AMap.Marker({
        position: lnglat
      });
      this.map.add(marker);
    },
    submit() {
      this.$emit('onSubmit', this.searchResult);
      this.dialogShow = false;
@@ -218,4 +246,8 @@
  border-radius: var(--el-border-radius-round);
  box-shadow: var(--el-box-shadow);
}
.dialog {
  pointer-events: auto;
}
</style>