blog station

<template>
  <div>
    <el-select
      style="width: 100%; margin-bottom: 10px"
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="handleSearch"
      :loading="loading"
      @change="selectAddress"
    >
      <el-option
        v-for="item in suggestionList"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <div class="map-wrap">
      <!-- 地图容器 -->
      <div id="mapContainer" style="width: 100%; height: 500px"></div>
      <el-button class="confirm-btn" type="primary" circle @click="confirmMap"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      map: null, // 地图实例
      search: null, // 搜索实例
      suggest: null, // 关键字输入提示实例
      markers: null, // 标记点集合
      suggestionList: [], // 搜索建议列表
      marker: null, // 地图标记点
      loading: false,
      value: "",
      info: null,
    };
  },
  created() {
    //解决放大缩小地图控制台一直报错问题
    const oldAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function (
      key,
      funcs,
      options = {}
    ) {
      oldAddEventListener.call(this, key, funcs, { passive: false });
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      const center = new TMap.LatLng(39.916527, 116.397128); // 默认中心点（北京）
      this.map = new TMap.Map("mapContainer", {
        center: center,
        zoom: 12,
      });
      this.search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
      this.suggest = new TMap.service.Suggestion({
        // 新建一个关键字输入提示类
        pageSize: 10, // 返回结果每页条目数
        region: "", // 限制城市范围
        regionFix: false, // 搜索无结果时是否固定在当前城市
      });
      this.markers = new TMap.MultiMarker({
        map: this.map,
        geometries: [],
      });
      // 创建信息窗
      this.info = new TMap.InfoWindow({
        map: this.map,
        position: this.map.getCenter(),
      }).close();
      this.map.on("click", async (evt) => {
        // 清除旧标记
        if (this.marker) this.marker.setMap(null);
        // 获取click事件返回的poi信息
        let poi = evt.poi;
        if (poi) {
          // 拾取到POI
          this.info.setContent(poi.name).setPosition(poi.latLng).open();
          const location = new TMap.LatLng(poi.latLng.lat, poi.latLng.lng);
          const result = await this.suggest.getSuggestions({
            keyword: poi.name,
            location,
          });
          let currentPoi = result.data[0];
          let newPoi = {
            title: currentPoi.title,
            address: currentPoi.address,
            id: currentPoi.id,
            lat: currentPoi.location.lat,
            lng: currentPoi.location.lng,
          };
          this.selectSite = newPoi;
        } else {
          // 没有拾取到POI
          this.info.close();
        }
      });
    },

    // 处理搜索输入（防抖）
    handleSearch(query) {
      this.loading = true;
      this.searchAddress(query);
    },
    // 调用搜索建议接口
    async searchAddress(query) {
      if (query !== "") {
        this.loading = true;
        const result = await this.suggest.getSuggestions({
          keyword: query,
        });
        this.showSuggestions(result.data);
      } else {
        this.options = [];
      }
    },

    // 显示搜索结果
    showSuggestions(list) {
      this.loading = false;
      this.suggestionList = list.map((item) => ({
        title: item.title,
        address: item.address,
        id: item.id,
        lat: item.location.lat,
        lng: item.location.lng,
      }));
    },
    // 选中地址
    selectAddress(val) {
      const item = this.suggestionList.find((item) => item.id === val);
      console.log("选中地址:", item);
      this.selectSite = item;
      const position = new TMap.LatLng(item.lat, item.lng);

      // 清除旧标记
      if (this.marker) this.marker.setMap(null);
      // 添加新标记
      this.marker = new TMap.MultiMarker({
        map: this.map,
        geometries: [{ position }],
      });
      this.info.setContent(item.title).setPosition(position).open();

      // 移动地图中心
      this.map.setCenter(position);
    },
    confirmMap() {
      this.$emit("select", this.selectSite);
    },
  },
};
</script>

<style>
.map-wrap {
  position: relative;
}
.confirm-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1001;
  padding: 20px 10px !important;
  font-size: 24px;
}
</style>