tms-erp-web/src/components/address-map-picker/main.vue

<template>
  <el-dialog
    v-model="visible"
    title="地图选择地址"
    width="920px"
    append-to-body
    @opened="initMap"
  >
    <div class="address-map-picker__toolbar">
      <el-input
        v-model="keyword"
        clearable
        placeholder="输入地址关键词"
        @keyup.enter="searchKeyword"
      />
      <el-button type="primary" :loading="searching" @click="searchKeyword">搜索</el-button>
    </div>
    <div ref="map" class="address-map-picker__map"></div>
    <div class="address-map-picker__info">{{ status }}</div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="!selected.longitude || resolving" @click="confirm">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
const AMAP_KEY = '653b7cf105ad7fb8ec9b2f5198ade315';
const AMAP_SECURITY_CODE = '5aab65c632e48ebae0d0e28f5b28e21a';
let amapLoader;

export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    address: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue', 'confirm'],
  data() {
    return {
      visible: false,
      keyword: '',
      status: '可搜索地址或点击地图选点',
      searching: false,
      resolving: false,
      selected: {},
      amap: null,
      marker: null,
      geocoder: null,
    };
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(value) {
        this.visible = value;
        if (value) {
          this.keyword = this.address || '';
          this.selected = {};
          this.status = '可搜索地址或点击地图选点';
        }
      },
    },
    visible(value) {
      this.$emit('update:modelValue', value);
    },
  },
  beforeUnmount() {
    if (this.amap) {
      this.amap.destroy();
    }
  },
  methods: {
    loadAmap() {
      if (window.AMap && window.AMap.Map) {
        return Promise.resolve();
      }
      if (!amapLoader) {
        amapLoader = new Promise((resolve, reject) => {
          window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
          const script = document.createElement('script');
          script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
          script.async = true;
          script.onload = resolve;
          script.onerror = () => reject(new Error('高德地图组件加载失败'));
          document.body.appendChild(script);
        });
      }
      return amapLoader;
    },
    initMap() {
      this.loadAmap()
        .then(() => {
          this.$nextTick(() => {
            if (!this.amap) {
              this.amap = new window.AMap.Map(this.$refs.map, {
                center: [116.40769, 39.89945],
                zoom: 11,
              });
              this.amap.on('click', event => this.pickPoint(event.lnglat));
            } else {
              this.amap.resize();
              this.clearMarker();
            }
          });
        })
        .catch(() => {
          this.$message.error('高德地图组件加载失败，请稍后重试');
          this.visible = false;
        });
    },
    ensureGeocoder() {
      if (this.geocoder) return Promise.resolve(this.geocoder);
      return new Promise((resolve, reject) => {
        window.AMap.plugin(['AMap.Geocoder'], () => {
          try {
            this.geocoder = new window.AMap.Geocoder();
            resolve(this.geocoder);
          } catch (error) {
            reject(error);
          }
        });
      });
    },
    runGeocode(action, input) {
      return this.ensureGeocoder().then(
        geocoder =>
          new Promise((resolve, reject) => {
            const done = (status, result) => {
              if (status === 'complete' && result) {
                resolve(result);
              } else {
                reject(new Error('高德地图请求失败'));
              }
            };
            if (action === 'location') {
              geocoder.getLocation(input, done);
            } else {
              geocoder.getAddress(input, done);
            }
          })
      );
    },
    searchKeyword() {
      const keyword = String(this.keyword || '').trim();
      if (!keyword) {
        this.$message.warning('请输入地址关键词');
        return;
      }
      this.searching = true;
      this.loadAmap()
        .then(() => this.runGeocode('location', keyword))
        .then(result => {
          const point = result.geocodes?.[0]?.location || result.location;
          if (!point) {
            throw new Error('未找到匹配地址');
          }
          this.pickPoint(point, keyword);
        })
        .catch(() => {
          this.status = '未找到匹配地址';
          this.$message.warning('地图搜索无匹配地址');
        })
        .finally(() => {
          this.searching = false;
        });
    },
    pickPoint(point, fallbackAddress = '') {
      const longitude = typeof point.getLng === 'function' ? point.getLng() : point.lng;
      const latitude = typeof point.getLat === 'function' ? point.getLat() : point.lat;
      if (!Number.isFinite(Number(longitude)) || !Number.isFinite(Number(latitude))) {
        this.$message.warning('选点坐标无效');
        return;
      }
      const lnglat = new window.AMap.LngLat(Number(longitude), Number(latitude));
      this.renderMarker(lnglat);
      this.selected = { longitude: Number(longitude), latitude: Number(latitude), address: fallbackAddress };
      this.status = '正在解析地址...';
      this.resolving = true;
      this.runGeocode('address', lnglat)
        .then(result => {
          const detailAddress = result.regeocode?.formattedAddress || fallbackAddress;
          this.selected = { ...this.selected, address: detailAddress };
          this.keyword = detailAddress || this.keyword;
          this.status = detailAddress || '已选点，可确认回填';
        })
        .catch(() => {
          this.status = '地址解析失败，请重新选点';
          this.$message.error('地址解析失败，请重新选点');
          this.selected = {};
          this.clearMarker();
        })
        .finally(() => {
          this.resolving = false;
        });
    },
    renderMarker(point) {
      this.clearMarker();
      this.marker = new window.AMap.Marker({ position: point });
      this.marker.setMap(this.amap);
      this.amap.setCenter(point);
    },
    clearMarker() {
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
    },
    confirm() {
      if (!this.selected.address) {
        this.$message.warning('请等待地址解析完成后再确认');
        return;
      }
      this.$emit('confirm', this.selected.address);
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.address-map-picker {
  &__toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;

    .el-input {
      flex: 1;
    }
  }

  &__map {
    width: 100%;
    height: 420px;
    border: 1px solid #eff1f7;
  }

  &__info {
    margin-top: 10px;
    color: #606266;
    line-height: 1.6;
  }
}
</style>