前言

在开发前端应用时，地图选择器是一个非常常见的需求。尤其是在一些需要用户选择地址的场景，如电商平台、旅游网站、酒店预定等，百度地图组件能提供准确的地理位置服务。在本文中，我们将一步步展示如何使用 Vue 3 和 Element Plus 来实现一个百度地图位置选择器组件。这个组件允许用户通过地图选择位置，并展示详细的地址信息。

准备工作

在开始实现之前，我们需要确保已经安装了以下依赖：
Vue 3：Vue.js 是我们前端应用的基础框架。
Element Plus：一个基于 Vue 3 的组件库，提供了许多高质量的 UI 组件。
百度地图 API：百度地图 API 提供了丰富的地图功能接口，供我们在网页中嵌入地图，并获取地理位置信息。

安装依赖

如果你还没有安装这些依赖，可以通过以下命令安装：

1. npm install vue@next element-plus

复制代码

同时，为了能在 Vue 项目中使用百度地图，我们需要引入百度地图的 API。在 index.html 中，添加以下代码：

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

复制代码

记得将 YOUR_API_KEY 替换成你自己的百度地图 API 密钥。

实现步骤


1. 创建百度地图组件

我们先从创建百度地图组件开始，这个组件将允许用户在地图上选择位置。
1.1 创建 BaiduMapPicker.vue 组件
首先，我们创建一个 BaiduMapPicker.vue 组件，用于加载地图和处理用户选择的位置。

1. <template>
   
2.   <div id="map" style="height: 100%;"></div>
   
3. </template>
   
4. 
   
5. <script setup lang="ts">
   
6. import { onMounted, ref, watch } from 'vue';
   
7. 
   
8. const location = ref({
   
9.   latitude: 26.61246398970894,
   
10.   longitude: 106.59077252491133,
    
11. });
    
12. 
    
13. // 初始化百度地图
    
14. onMounted(() => {
    
15.   const map = new BMapGL.Map("map");
    
16.   const point = new BMapGL.Point(location.value.longitude, location.value.latitude);
    
17.   map.centerAndZoom(point, 15);
    
18.   map.addOverlay(new BMapGL.Marker(point));
    
19. 
    
20.   map.addEventListener('click', (e: any) => {
    
21.     location.value.latitude = e.latlng.lat;
    
22.     location.value.longitude = e.latlng.lng;
    
23.     map.clearOverlays();
    
24.     map.addOverlay(new BMapGL.Marker(e.latlng));
    
25.   });
    
26. });
    
27. </script>
    
28. 
    
29. <style scoped>
    
30. #map {
    
31.   width: 100%;
    
32.   height: 100%;
    
33. }
    
34. </style>

复制代码

1.2 说明
地图初始化：我们通过百度地图的 BMapGL.Map 类来创建一个地图实例，传入 longitude 和 latitude 初始化地图的中心位置，并设置缩放级别。
点击事件：监听地图上的点击事件，用户每点击一次地图，地图会更新位置并重新标记。

2. 创建主页面，使用地图组件

接下来，我们将在主页面中使用刚刚创建的 BaiduMapPicker 组件。我们会在弹窗中展示地图，并允许用户选择位置。
2.1 创建主页面

1. <template>
   
2.   <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000px">
   
3.     <div class="container">
   
4.       <h2>选择位置</h2>
   
5.       <BaiduMapPicker
   
6.         v-model="location"
   
7.         @update:location="handleLocationUpdate"
   
8.       />
   
9.       <div class="location-info">
   
10.         <h3>选中的位置信息：</h3>
    
11.         <p>纬度：{{ location.latitude }}</p>
    
12.         <p>经度：{{ location.longitude }}</p>
    
13.       </div>
    
14.     </div>
    
15.     <template #footer>
    
16.       <el-button @click="submitForm" type="primary">确定</el-button>
    
17.       <el-button @click="cancel" type="default">取消</el-button>
    
18.     </template>
    
19.   </Dialog>
    
20. </template>
    
21. 
    
22. <script setup lang="ts">
    
23. import { ref } from 'vue';
    
24. import { ElButton, ElDialog } from 'element-plus';
    
25. import BaiduMapPicker from '@/components/BaiduMapPicker.vue';
    
26. 
    
27. const dialogVisible = ref(false);
    
28. const dialogTitle = ref("选择地址");
    
29. const location = ref({ latitude: 26.61246398970894, longitude: 106.59077252491133 });
    
30. 
    
31. const handleLocationUpdate = (newLocation: { latitude: number, longitude: number }) => {
    
32.   location.value = newLocation;
    
33. };
    
34. 
    
35. const submitForm = () => {
    
36.   dialogVisible.value = false;
    
37.   console.log("提交的位置：", location.value);
    
38. };
    
39. 
    
40. const cancel = () => {
    
41.   dialogVisible.value = false;
    
42. };
    
43. </script>
    
44. 
    
45. <style scoped>
    
46. .container {
    
47.   padding: 20px;
    
48. }
    
49. 
    
50. .location-info {
    
51.   margin-top: 20px;
    
52.   background-color: #f5f7fa;
    
53.   padding: 15px;
    
54.   border-radius: 5px;
    
55. }
    
56. 
    
57. h2 {
    
58.   margin-bottom: 15px;
    
59.   font-size: 1.5em;
    
60. }
    
61. 
    
62. h3 {
    
63.   margin-bottom: 10px;
    
64. }
    
65. 
    
66. p {
    
67.   font-size: 1em;
    
68.   margin: 5px 0;
    
69. }
    
70. </style>

复制代码

2.2 说明
Dialog 弹窗：我们使用了 Element Plus 的 Dialog 组件来展示百度地图和位置信息。当用户点击“确定”时，我们可以通过 submitForm 方法提交选中的位置。
位置更新：当用户点击地图时，handleLocationUpdate 会被触发，更新 location 数据并显示在页面上。

3. 弹窗控制与位置展示

我们使用了 Element Plus 的 Dialog 组件来控制弹窗的显示与隐藏，确保用户体验良好。

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

复制代码

通过这种方式，我们实现了一个简单而直观的地址选择功能。

效果展示

1.位置选择
用户可以在弹窗中看到百度地图，点击任意位置，地图上的标记会随之更新，显示选中的纬度和经度。
2.提交结果
点击“确定”后，用户选择的经纬度数据会被提交，并可以用于后续的业务逻辑。

总结

通过这篇博客，我们学习了如何在 Vue 3 中使用百度地图 API 实现一个位置选择器组件。该组件不仅支持位置选择功能，还能够展示用户选择的详细地址信息。通过 Vue 3 和 Element Plus 的结合，我们能够快速开发出高质量的 UI 组件，提升用户体验。
小贴士
API 密钥保护：在生产环境中，记得将百度地图的 API 密钥保存在安全的地方，避免暴露在前端代码中。
优化加载速度：考虑到地图加载时间较长，可以对地图组件进行懒加载，提升用户体验。
到此这篇关于基于Vue3实现百度地图位置选择器组件的文章就介绍到这了,更多相关Vue3百度地图位置选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/340141fmh.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！