效果如下
效果说明:点击网页中摸一个按钮的时候对应的标注点放大
实现方法
实现的整体思路是当鼠标点击按钮的时候,首先执行的是去除地图上所有的标注,并且将页面上所有标注的active设置为false(标注的active为true则表示为该标注以放大形式显示),然后将点击按钮所对应的坐标中active设置为true,最后绘制所有点的坐标
1.global.vue用于存放全局变量,这里的数据就直接放在global.vue中
let siteList = {
'trip': {
'positions': [
{// 长沙的经纬度
lng: 112.945358,
lat: 28.234451,
active: false
},
{// 武汉的经纬度
lng: 114.311754,
lat: 30.598604,
active: false
}
]
},
'eat': {
}
}
2.javascript函数分别实现去除所有标注点、添加一个标注点、添加多个标注点
// 去除地图上所有的标注
removeAllMarker: function (map, markerArr) { //markerArr是用于保存标注点的全局变量,在下面removeOverlay中要用到
for (let proprty in this.GLOBAL.siteList) {
let site = this.GLOBAL.siteList[proprty]
if(site.hasOwnProperty('positions')){
for (let i = 0; i < site.positions.length; i++) {
site.positions[i].active = false
}
}
}
for (let i = 0; i < markerArr.length; i++) {
map.removeOverlay(markerArr[i])
}
},
// 在地图上添加一个标注
markerFun: function (map, point, iconType) { //iconType是地图标注点的样式
let marker = new BMap.Marker(point, {
icon: iconType
})
this.GLOBAL.markerArr.push(marker)
map.addOverlay(marker)
},
//在地图上添加多个标注
multMarker: function (obj) {
for (let property in obj) {
if (obj[property].hasOwnProperty('positions')) {
let positions = obj[property].positions
for (let i = 0; i < positions.length; i++) {
// 创建坐标点
let points = new BMap.Point(positions[i].lng, positions[i].lat)
//判断该标注是否是active
if (positions[i].active) {
this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1Active)
} else {
this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1)
}
}
}
}
},