daoyou_manage_web/src/components/Map/index.vue

<template>
  <!-- 带有搜索地点的地图 -->
  <div>
    <el-form-item :label="title">
      <el-input
        v-model="form.address"
        :placeholder="`请输入${title}`"
        class="input-with-select"
        style="width: 300px"
        @keyup.enter="debouncedSearch(form.address)"
      >
        <template #append>
          <el-button :icon="Search" @click="debouncedSearch(form.address)" />
        </template>
      </el-input>
    </el-form-item>
    <tlbs-map
      ref="map"
      style="margin-left: 80px"
      api-key="
6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO"
      :center="center"
      :zoom="zoom"
      :control="control"
      @click="onClick"
    >
      <tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
    </tlbs-map>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { propTypes } from '@/utils/propTypes';
import { jsonp } from 'vue-jsonp';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { debounce } from '@/utils/debounce.js';
import { OssVO } from '@/api/system/oss/types';
import { listByIds } from '@/api/system/oss';
// const prop = defineProps(['datas']);
const props = defineProps({
  datas: {
    type: [String, Object, Array],
    default: () => {}
  },
  modelValue: {
    type: [String, Object, Array],
    default: () => {}
  },
  //标题
  title: {
    type: [String],
    default: '活动'
  },
  //搜索地址
  address: {
    type: [String],
    default: ''
  }
  //查询出来的经纬度
  // form: {
  //   type: [String, Object, Array],
  //   default: () => []
  // }
});
const emit = defineEmits(['modelValue']);
// const address = ref(''); // 搜索地点
const form = ref(
  props.datas || {
    address: '',
    latitude: '',
    longitude: '',
    regionCode: ''
  }
);
watch(() => props.modelValue);
// 点击地点，获取经纬度及地址信息
const onClick = (e: any) => {
  jsonp(
    `https://apis.map.qq.com/ws/geocoder/v1/?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&location=${e.latLng.lat},${e.latLng.lng}&output=jsonp`,
    {}
  ).then((data) => {
    if (data.status == 0) {
      if (form.value) {
        // form.value.address =
        //   data.result.address_component.province +
        //   data.result.address_component.city +
        //   data.result.address_component.district +
        //   data.result.address_component.street +
        //   data.result.address_component.street_number;
        form.value.latitude = data.result.location.lat;
        form.value.longitude = data.result.location.lng;
        form.value.address = data.result.formatted_addresses.recommend;
        // form.value.city = data.result.address_component.city;
        // form.value.region = data.result.ad_info.adcode; //行政区划编码
        form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
        center.value = { lat: data.result.location.lat, lng: data.result.location.lng };
        searchLocation.value = data.result.formatted_addresses.recommend;
        geometries.value = [{ styleId: 'marker', position: { lat: data.result.location.lat, lng: data.result.location.lng } }];
        console.log(form.value);
        emit('modelValue', form.value);
      }
    }
  });
};
//输入位置，搜索位置
const performSearch = async (text) => {
  // 这里简单模拟延迟，模拟真实的异步请求耗时
  // await new Promise((resolve) => setTimeout(resolve, 500));
  // 假设这里根据输入的文本去查找匹配的数据，实际中替换成真实逻辑
  if (text === '') {
    console.log('搜索内容为空');
  } else {
    console.log('搜索内容为：', text);
    // 调用腾讯地图API进行搜索，并展示在地图上
    // geocoder(text).then((result) => {
    //   console.log(result);
    // });
    jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?address=${text}&key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&output=jsonp`, {}).then((data) => {
      console.log(data);
      if (data.status == 0) {
        // form.value.address =
        //   data.result.address_components.province +
        //   data.result.address_components.city +
        //   data.result.address_components.district +
        //   data.result.address_components.street +
        //   data.result.address_components.street_number;
        form.value.latitude = data.result.location.lat;
        form.value.longitude = data.result.location.lng;
        // form.value.region = data.result.ad_info.adcode; //行政区划编码
        // form.value.regionCode = data.result.ad_info.adcode; //行政区划编码

        form.value.address = text;
        // form.value.city = data.result.address_components.city;
        center.value = { lat: data.result.location.lat, lng: data.result.location.lng };
        geometries.value = [{ styleId: 'marker', position: { lat: data.result.location.lat, lng: data.result.location.lng } }];
        console.log(form.value);
        emit('modelValue', form.value);
      } else if (data.status == 348) {
        //地址信息不明确，需弹出提示
        proxy?.$modal.msgError('未查询到地点，请补充详细地址信息');
        return;
      }
    });
  }
};
const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜索函数，延迟设为300毫秒

const map = ref(null);
const center = ref({ lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 });
const zoom = ref(20);
const control = reactive({
  scale: {},
  zoom: {
    position: 'topLeft'
  }
});
const searchLocation = ref(''); // 搜索地点
const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }]);
const styles = reactive({
  marker: {
    width: 20,
    height: 30,
    anchor: { x: 10, y: 30 }
  }
});
const options = reactive({
  minZoom: 5,
  maxZoom: 20
});
// 监听输入框内容变化，调用防抖后的搜索函数
watch(searchLocation, (newValue) => {
  // debouncedSearch(newValue);
});
</script>
<style scoped lang="scss"></style>