配置:
npm install vue-amap --save
【1】在main.js配置
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
// 高德key
key: '自己申请的高德地图的key',
// 插件集合 (插件按需引入)
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
uiVersion: '1.0.11', // ui版本号,也是需要写,不配置不加载,
})
【2】vue文件
<el-amap vid="map" :zoom="zoom" :center="center">
<el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
</el-amap>
【3】在data中配置:
zoom:地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]
center:地图中心点坐标值[经度,纬度]
label:{content,offset: [x, y]} (对象)添加文本标注,content为文本标注的内容,offset为偏移量,左上角为偏移量为(0,0)
zoom: 15,
center: [113, 22],
label: {
content: '地址名',
offset: [10, -10],
},