需要自行引入高德地图,参考组件 | vue-amap。本案例实现点击高德地图上的marker并放大该markder的图标。当点击另外的markder时,当前marker恢复原来的大小
效果图:
<template>
<div id="mapExam">
<el-amap ref='map' vid="amapDemo" :amap-manager="amapManager" :events="mapEvents" class="amap-demo">
<el-amap-marker class="selectedMarker"
v-for="(marker, index) in datas"
:key="index" :position="marker.lnglat"
:icon="marker.level === 'A' ? levelAIcon : (marker.level === 'B' ? levelBIcon : levelCIcon)"
topWhenClick="true"
:extData="marker"
:events="markerEvents">
</el-amap-marker>
</el-amap>
</div>
</template>
<style lang="less" scoped>
.amap-demo {
height: 3rem;
}
</style>
<script>
import { AMapManager } from 'vue-amap'
let amapManager = new AMapManager()
export default {
data() {
let self = this
return {
amapManager,
levelAIcon: new AMap.Icon({
size: new AMap.Size(25, 30), // 图标尺寸
image: require('../assets/img/levelA@3x.png'), // Icon的图像
imageSize: new AMap.Size(25, 30)
}), // A类图标
levelBIcon: new AMap.Icon({
size: new AMap.Size(25, 30), // 图标尺寸
image: require('../assets/img/levelB@3x.png'), // Icon的图像
imageSize: new AMap.Size(25, 30)
}), // B类图标
levelCIcon: new AMap.Icon({
size: new AMap.Size(25, 30), // 图标尺寸
image: require('../assets/img/levelC@3x.png'), // Icon的图像
imageSize: new AMap.Size(25, 30)
}), // C类图标
datas: [
{
id: 1,
level: 'A',
lnglat: [121.5273285, 31.21515044],
},
{
id: 2,
level: 'A',
lnglat: [121.5253184, 31.21515044],
},
{
id: 3,
level: 'A',
lnglat: [121.5253184, 31.21315044],
},
{
id: 4,
level: 'A',
lnglat: [121.5253184, 31.21715044],
},
{
id: 5,
level: 'A',
lnglat: [121.5233184, 31.21515044],
},
{
id: 6,
level: 'A',
lnglat: [121.5233184, 31.21715044],
},
{
id: 7,
level: 'B',
lnglat: [121.5283285, 31.21815044],
},
{
id: 8,
level: 'B',
lnglat: [121.5293184, 31.21915044],
},
{
id: 9,
level: 'B',
lnglat: [121.5263184, 31.21615044],
},
{
id: 10,
level: 'B',
lnglat: [121.5223184, 31.21915044],
},
{
id: 11,
level: 'B',
lnglat: [121.5203184, 31.21515044],
},
{
id: 12,
level: 'B',
lnglat: [121.5233184, 31.21015044],
},
{
id: 13,
level: 'C',
lnglat: [121.5203285, 31.21815044],
},
{
id: 14,
level: 'C',
lnglat: [121.5293184, 31.21015044],
},
{
id: 15,
level: 'C',
lnglat: [121.5263184, 31.21315044],
},
{
id: 16,
level: 'C',
lnglat: [121.5223184, 31.21415044],
},
{
id: 17,
level: 'C',
lnglat: [121.5243184, 31.21915044],
},
{
id: 18,
level: 'C',
lnglat: [121.5203184, 31.20995044],
},
{
id: 19,
level: 'C',
lnglat: [121.5103184, 31.20995044],
}
],
lastClickedMarker: null,
mapEvents: {
init(o) {
// o 为地图组件实例
},
complete () {
const map = self.amapManager.getMap() // 获取地图组件实例
// setFitView(overlayList:Array)
// 根据地图上添加的覆盖物分布情况,
// 自动缩放地图到合适的视野级别,参数overlayList默认为当前地图上添加的所有覆盖物图层
map.setFitView()
}
},
markerEvents: {
click(e) {
self.selectedMarkerStore = e.target.getExtData()
if (self.lastClickedMarker) {
let icon = self.lastClickedMarker.getIcon()
self.lastClickedMarker.setOffset(new AMap.Pixel(-10, -30))
self.lastClickedMarker.setIcon(
new AMap.Icon({
size: new AMap.Size(25, 30), // 图标尺寸
image: icon.F.image, // Icon的图像
imageSize: new AMap.Size(25, 30)
})
)
}
let icon2 = e.target.getIcon()
e.target.setIcon(
new AMap.Icon({
size: new AMap.Size(40, 50), // 图标尺寸
image: icon2.F.image, // Icon的图像
imageSize: new AMap.Size(40, 50)
})
)
e.target.setOffset(new AMap.Pixel(-18, -50))
self.lastClickedMarker = e.target
}
}
}
},
mounted() {
AMap.plugin('AMap.CircleEditor', function () {//回调函数
})
},
}
</script>