首页vue3项目中使用高德地图

vue3项目中使用高德地图

时间: 2025-02-17 12:21:45 浏览: 27

在Vue3项目中使用高德地图（AMap），首先需要安装官方提供的Vue-Amap插件。你可以通过npm或yarn来添加依赖： ```bash # npm npm install amap-vue3 # yarn yarn add amap-vue3 ``` 接下来，在组件中引入并注册AMap实例： ```javascript import { AMapLoader } from 'amap-vue3'; export default { setup() { const initAMap = async () => { // 需要申请key，可以在这里替换为你自己的AMap API Key await AMapLoader.init({ key: 'your_amap_key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale'] // 根据需要加载的模块 }); return AMap.Map('containerId', {}); // containerId是地图容器的选择器 }; onMounted(() => { initAMap(); }); return {}; } } ``` 在模板中，你可以创建一个div元素，设置`ref`属性作为地图容器，并显示地图： ```html <template> <div ref="containerId" style="width: 100%; height: 500px;"></div> </template> ``` 对于更复杂的地图操作，如标记、路由规划等，你可以参考AMap Vue3文档中的示例，以及官方API来编写相应的逻辑。

阅读全文