首页vue3使用高德地图教程cdn引入

vue3使用高德地图教程cdn引入

时间: 2024-10-08 08:25:28 浏览: 120

Vue3中使用高德地图（AMap）可以通过CDN引入并结合Vuex或组件化的方式来实现。以下是简单的步骤： 1. **引入CDN**：在HTML文件的`<head>`标签里添加高德地图的JS库，通常选择基础版： ```html <script src="https://webapi.amap.com/maps?v=1.4.18&key=YOUR_AMAP_KEY"></script> ``` 替换 `YOUR_AMAP_KEY` 为你的高德地图API key。 2. **安装依赖**：使用npm或yarn安装vue-amap这个官方推荐的Vue组件库： ``` npm install @vue-amap/core @vue-amap/map # 或者 yarn add @vue-amap/core @vue-amap/map ``` 3. **在Vue组件中使用**： - 首先，在`main.js`或`setup()`函数中导入并使用： ```javascript import { Map, Marker } from '@vue-amap/core'; import AMap from '@vue-amap/map'; // 创建实例 Vue.use(AMap); Vue.use(Map); ``` - 然后在需要的地图组件中，例如`App.vue`或自定义组件内创建地图实例： ```html <template> <div id="map" style="height: 500px;"></div> </template> <script> export default { mounted() { const map = new AMap.Map('map', { zoom: 12, // 缩放级别 center: [116.39, 39.9], // 中心点坐标 }); // 可选：添加标记点 new Marker({ position: map.getCenter(), }).setMap(map); } }; </script> ``` 4. **管理状态（可选，使用Vuex）**：如果你需要在多个地方共享地图的状态，可以考虑使用Vuex存储和管理地图实例。具体操作会涉及到Vuex的state、mutation和actions。记得替换 `YOUR_AMAP_KEY` 为你实际申请到的高德地图API密钥，并根据需要调整地图的配置。

阅读全文