cashier-web/src/components/ChooseAddress/index.vue

<template>
  <el-dialog
    title="选择地址"
    v-model="state.showLocation"
    :modal="true"
    :modal-append-to-body="false"
  >
    <div class="map_box">
      <div class="map">
        <el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
          <el-amap-marker :position="state.amapOptions.center"></el-amap-marker>
        </el-amap>
      </div>
      <div class="search_box">
        <el-input
          v-model="state.searchOption.keyword"
          placeholder="请输入关键字"
          @focus="state.searchOption.focus = true"
          @blur="autoCompleteSearchBlur"
          @input="autoCompleteSearch(state.searchOption.keyword)"
        >
          <template #append>
            <el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
              搜索
            </el-button>
          </template>
        </el-input>
        <div class="list" v-if="state.searchOption.focus && state.searchOption.show">
          <div
            class="item"
            @click="autoCompleteListClick(item)"
            v-for="item in state.autoCompleteList"
            :key="item.id"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="search_wrap">
        <div class="item" v-for="item in state.locationSearchList" :key="item.id">
          <div class="left">
            <div class="name">{{ item.name }}-{{ item.address }}</div>
            <div class="location">经纬度：{{ item.location.lng }},{{ item.location.lat }}</div>
          </div>
          <div class="btn">
            <el-button type="primary" @click="selectLocationHandle(item)">选择</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ElAmap } from "@vuemap/vue-amap";
import { initMapLoad } from "@/utils/mapLoadUtil";
onBeforeMount(async () => {
  const res = await initMapLoad();
});
const state = reactive({
  showLocation: false,
  amapOptions: {
    center: [108.946465, 34.347984],
    position: [],
  },
  searchOption: {
    city: "西安",
    citylimit: false,
    keyword: "",
    show: false,
    focus: false,
  },
  autoCompleteList: [],
  locationSearchList: [],
});
let ElMap = undefined;
let placeSearch = undefined;
let autoComplete = undefined;
let PlaceSearchIndex = 1;
function open() {
  state.showLocation = true;
}
function close() {
  state.showLocation = false;
}

function autoCompleteSearchBlur() {
  setTimeout(() => {
    state.searchOption.show = false;
  }, 200);
}

function autoCompleteSearch(keyword) {
  if (keyword === "") {
    state.autoCompleteList = [];
    return;
  }
  autoComplete.search(keyword, function (status, result) {
    if (status === "complete" && result.info === "OK") {
      // 搜索成功时，result即是对应的匹配数据
      console.log(result);
      state.searchOption.show = true;
      state.autoCompleteList = result.tips;
    }
  });
}
function autoCompleteListClick(item) {
  console.log(item);
  state.searchOption.keyword = item.name;
  state.autoCompleteList = [];
  placeSearchSearch(item.name);
}
function placeSearchSearch(keyword) {
  PlaceSearchIndex = 1;
  if (keyword === "") {
    state.locationSearchList = [];
    return;
  }
  //  关键字查询
  placeSearch.search(keyword, (status, result) => {
    console.log(status);
    console.log(result);
    state.locationSearchList = result.poiList.pois;
  });
}
function mapInit(map) {
  map.plugin(["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.ToolBar"], () => {
    const toolBar = new AMap.ToolBar();
    map.addControl(toolBar);
    // 注意：输入提示插件2.0版本需引入AMap.AutoComplete，而1.4版本应使用AMap.Autocomplete
    // 实例化AutoComplete
    var autoOptions = {
      city: "西安",
    };
    autoComplete = new AMap.AutoComplete(autoOptions);

    //构造地点查询类
    placeSearch = new AMap.PlaceSearch({
      pageSize: 10, // 单页显示结果条数
      pageIndex: PlaceSearchIndex, // 页码
      city: "西安", // 兴趣点城市
      citylimit: true, //是否强制限制在设置的城市内搜索
      map: map, // 展现结果的地图实例
      // panel: "search_wrap", // 结果列表将在此容器中进行展示。
      autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    });
  });

  ElMap = map;
}

const emits = defineEmits(["choose"]);
function selectLocationHandle(e) {
  emits("choose", e);
}
defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.map_box {
  width: 100%;
  position: relative;

  .map {
    height: 300px;
  }

  .search_box {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3000;
    .list {
      background-color: #fff;
      .item {
        height: 40px;
        line-height: 40px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        padding: 0 10px;
        cursor: pointer;
        &:hover {
          background-color: #eee;
        }
      }
    }
  }

  .search_wrap {
    padding: 6px 0;

    .item {
      display: flex;
      padding: 12px 0;

      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-right: 20px;

        .location {
          color: #999;
          padding-top: 4px;
        }
      }
    }
  }
}

.amap-sug-result {
  z-index: 2000;
}
</style>