vue3实现地图

在Vue 3中实现地图功能，可以借助第三方地图库，如百度地图、高德地图或谷歌地图，并结合Vue 3的组件化开发方式来完成。下面以使用百度地图为例，演示在Vue 3中实现地图功能的基本步骤：

1. 安装百度地图 SDK：在项目中安装百度地图 JavaScript API 的 SDK，可以通过 <script> 标签引入或使用 npm 安装。

2. 创建地图组件：在 components 目录下创建一个名为 Map.vue 的文件，并定义地图组件的选项。例如：

复制代码

<template> <div ref="mapContainer" class="map-container"></div> </template> <script> export default { mounted() { // 在组件挂载完成后，初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图实例 const map = new BMap.Map(this.$refs.mapContainer); // 设置地图中心点和缩放级别 const point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 添加其他地图操作和功能 // ... // 添加标记点 const marker = new BMap.Marker(point); map.addOverlay(marker); } } }; </script> <style> .map-container { width: 100%; height: 500px; } </style>

1. 在需要显示地图的父组件中使用地图组件：例如，在 App.vue 中使用刚刚创建的地图组件。

复制代码

<template> <div> <Map/> </div> </template> <script> import Map from './components/Map.vue'; export default { components: { Map } }; </script>

1. 在主入口文件中加载百度地图 SDK：在 main.js 中引入百度地图 SDK 并进行初始化设置。

javascript复制代码

// 引入百度地图 SDK const AK = 'Your_Baidu_Map_AK'; // 替