center:Array 地图中心点坐标值
zoom:地图缩放
PC上,默认范围[3,18],取值范围[3-18];
在移动设备上,默认范围[3-19],取值范围[3-19]
<template>
<div class="amap-page-container">
<el-amap vid="amapDemo"
:zoom="zoom"
:center="center"
:amap-manager="amapManager"
:events="mapEvents"
class="amap-demo">
<el-amap-marker vid="component-marker"
v-for="(marker, index) in markers"
:key="index"
:position="marker.position"
:content="marker.icon">
<!-- :offset="[-20,-20]"> -->
</el-amap-marker>
</el-amap>
</div>
</template>
<script>
import VueAMap from 'vue-amap'
let amapManager = new VueAMap.AMapManager()
export default {
name: 'Test',
components: {
},
data () {
return {
markerIcon: '<div class="jumper"><div></div><div></div><div></div></div>',
center: [116.405994, 39.915378],
zoom: 5,
// zoom: 13,
amapManager,
mapEvents: {
init (o) {
o.setMapStyle('amap://styles/edbc379c8110f081c564f98d8c59f80c');//自定义的高德地图的样式
}
},
markers: [
{
id: '01',
position: [116.405994, 39.915378],
icon: '',
}, {
id: '02',
position: [121.33666, 31.148908],
icon: '',
}
]
}
},
methods: {
},
created () {
},
mounted () {
setTimeout(() => {
// 遍历出一个marker,改变它的icon
for (let i = 0; i < this.markers.length; i++) {
if (this.markers[i].id === '02') {
this.markers[i].icon = this.markerIcon
this.zoom = 15
this.center = this.markers[i].position
}
}
}, 5000);
}
}
</script>