在Vue 3的setup函数中引入地图，通常需要使用第三方库来处理地图的渲染和交互。最常用的地图库之一是Leaflet，它是一个开源的JavaScript地图库，支持多种地图图层和交互功能。
以下是在Vue 3中使用Leaflet地图库的步骤：
安装leaflet和@vue-leaflet/vue-leaflet依赖：
在项目目录下运行以下命令安装leaflet和Vue 3的Leaflet适配库：
npm install leaflet @vue-leaflet/vue-leaflet --save
在Vue组件中使用Leaflet地图：
在需要使用地图的组件中，可以通过ref引入地图对象，并在setup函数中初始化地图。同时，还需要导入Leaflet的相关样式。
1. <template> 2. <div class="map-container" ref="mapContainer"></div> 3. </template> 4. 5. <script> 6. import { ref, onMounted } from 'vue'; 7. import 'leaflet/dist/leaflet.css'; // 导入Leaflet的样式 8. import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'; // 导入Vue 3的Leaflet适配库 9. 10. export default { 11. setup() { 12. const mapContainer = ref(null); // 使用ref引入地图容器对象 13. let map; 14. 15. onMounted(() => { 16. // 在组件挂载后初始化地图 17. map = LMap.value; // 获取地图实例 18. map.setView([51.505, -0.09], 13); // 设置地图中心和缩放级别 19. 20. // 添加TileLayer图层（这里使用OpenStreetMap作为底图） 21. LTileLayer.value.url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 22. LTileLayer.value.attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; 23. LTileLayer.value.addTo(map); 24. 25. // 可以添加其他地图元素或交互等操作 26. }); 27. 28. return { 29. mapContainer, 30. }; 31. }, 32. }; 33. </script> 34. 35. <style> 36. .map-container { 37. width: 100%; 38. height: 500px; 39. } 40. </style>
在上述示例中，我们使用ref引入了一个地图容器对象mapContainer，并在setup函数中使用onMounted钩子来初始化地图。我们还导入了@vue-leaflet/vue-leaflet中的LMap和LTileLayer，分别用于创建地图实例和添加底图图层。
请注意，上述示例中使用的是OpenStreetMap作为底图，你可以根据自己的需求替换为其他地图图层。Leaflet支持多种地图图层，例如Google Maps、Mapbox等，可以根据文档进行配置。
总结：在Vue 3的setup函数中使用Leaflet地图库，首先需要安装相应的依赖。然后，在setup函数中使用ref引入地图容器对象，然后在onMounted钩子中初始化地图，并使用适配库提供的组件和API来添加地图图层和交互。通过这种方式，你可以在Vue 3中轻松地集成并使用地图功能。
![[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法](https://ucc.alicdn.com/pic/developer-ecology/iwb4s2erfjeee_d14da44e4e4d4f2ab6c458dc8c34c9f5.png?x-oss-process=image/resize,h_160,m_lfit)
