第一步：
需要去高德开放平台注册账号，并申请一个Kye后面需要使用。申请成功后在控制台>我的应用里面可以查看。
第二步：
在项目的根目录打开终端，输入
npm install vue-amap
下载高德地图所需要的包
第三步：
在main.js中引入，具体为：
import AMap from 'vue-amap'
AMap.initAMapApiLoader({
// 高德的key
key: '你之前申请的key填在这里',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})
第四步：
在需要使用地图的组件中调用
<template>
<div>
<el-amap
ref="map"
vid="amapDemo"
:center="center"
:zoom="zoom"
class="amap-demo"
mapStyle="amap://styles/darkblue"
style="width:700px;height:500px;margin:50px 400px"
>
<!--mapStyle:地图样式-->
<!-- 地图中的标记点-->
<el-amap-circle-marker
v-for="marker in markers"
:center="marker.center"
:radius="marker.radius"
:fill-color="marker.fillColor"
:fill-opacity="marker.fillOpacity"
:events="marker.events"
></el-amap-circle-marker>
</el-amap>
</div>
</template>
<script>
export default {
data() {
return {
zoom: 18,//缩放
center: [103.941762, 30.765781],//地图定位
//标记点参数集合
markers: [
{
center: [103.941762, 30.765781],//标点位置
radius: 12,
fillOpacity: 1,
fillColor: "rgba(237,150,134,1)",
//标点点击事件
events: {
click: () => {
console.log('Hello aMap')
}
}
}
]
};
}
};
</script>
效果图大概就是下面这样子
成品图
具体更多参数，可以参考vue-amap的官方文档
