背景介绍:
需要实现的功能是,点击除标点以外的地方,信息窗口去掉。
信息窗口就是点击地图的标点后,出现在地图旁边的信息框。
具体实现:
是基于海量点实现的,首先用两个全局变量用来记录点击地图的次数和点击标点的次数。
只要点击地图的次数大于点击标点的次数,就说明鼠标左键没有点击标点,就去掉信息窗口就可以了。
重点是:map.on绑定点击地图事件,mass.on绑定点击标点事件
代码
var map = new AMap.Map('container', { //地图
zoom: 4,//级别
center: [102.342785, 35.312316]//中心点坐标
});
var mass = new AMap.MassMarks(point, {//point是海量点的数据
opacity: 1,
zIndex: 111,
cursor: 'pointer',//指定鼠标悬停时的鼠标样式
});
var countMass = 0;//点击标点
var countMap = 0;//点击地图
map.on('click',function (e) {
countMap = countMap+1;//点击了地图,值就改变
//鼠标点击事件
mass.on('click', function (e) {
countMass = countMass+1;//点击标点,值就改变
marker.setPosition(e.data.lnglat);//经纬度的值
marker.setLabel({
offset: new AMap.Pixel(20, -10), //偏移信息窗体的显示位置
content: "信息窗口内容"
});
});
//出现标点数量大于点击地图数量时,就设置标点数量大于地图点击数量
if(countMass > countMap){
countMass = countMap;
}
console.log("点击地图:",countMap," 标点:",countMass);
if(countMap > countMass){
marker.setLabel({});//去掉信息窗口
countMass = 0;//点击标点
countMap = 0;//点击地图
}
});
自己想的解决办法,可能不够简洁,若有更好的实现办法,可以评论或者私信…
完毕~