目录
前置准备
1. 创建Vue项目
首先,我们需要创建一个Vue项目。如果你还没有安装Vue CLI,可以通过以下命令安装:
npm install -g @vue/cli
然后,创建一个新的Vue项目:
vue create amap-vue-project
选择默认配置或根据需要自定义配置。
2. 安装高德地图SDK
在项目中安装高德地图JavaScript API。你可以直接在index.html
中引入:
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
记得将YOUR_AMAP_KEY
替换为你的高德地图API密钥。
实现Marker组件
1. 创建Map.vue组件
在src/components/
目录下创建一个名为Map.vue
的组件