基于Vue3实现百度地图位置选择器组件

npm install vue@next element-plus

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>

<template>
  <div id="map" style="height: 100%;"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

const location = ref({
  latitude: 26.61246398970894,
  longitude: 106.59077252491133,
});

// 初始化百度地图
onMounted(() => {
  const map = new BMapGL.Map("map");
  const point = new BMapGL.Point(location.value.longitude, location.value.latitude);
  map.centerAndZoom(point, 15);
  map.addOverlay(new BMapGL.Marker(point));

  map.addEventListener('click', (e: any) => {
    location.value.latitude = e.latlng.lat;
    location.value.longitude = e.latlng.lng;
    map.clearOverlays();
    map.addOverlay(new BMapGL.Marker(e.latlng));
  });
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000px">
    <div class="container">
      <h2>选择位置</h2>
      <BaiduMapPicker
        v-model="location"
        @update:location="handleLocationUpdate"
      />
      <div class="location-info">
        <h3>选中的位置信息：</h3>
        <p>纬度：{{ location.latitude }}</p>
        <p>经度：{{ location.longitude }}</p>
      </div>
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary">确定</el-button>
      <el-button @click="cancel" type="default">取消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import BaiduMapPicker from '@/components/BaiduMapPicker.vue';

const dialogVisible = ref(false);
const dialogTitle = ref("选择地址");
const location = ref({ latitude: 26.61246398970894, longitude: 106.59077252491133 });

const handleLocationUpdate = (newLocation: { latitude: number, longitude: number }) => {
  location.value = newLocation;
};

const submitForm = () => {
  dialogVisible.value = false;
  console.log("提交的位置：", location.value);
};

const cancel = () => {
  dialogVisible.value = false;
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.location-info {
  margin-top: 20px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 5px;
}

h2 {
  margin-bottom: 15px;
  font-size: 1.5em;
}

h3 {
  margin-bottom: 10px;
}

p {
  font-size: 1em;
  margin: 5px 0;
}
</style>

const dialogVisible = ref(false); // 控制弹窗的显示
const dialogTitle = ref("选择地址"); // 弹窗标题