【高德地图】点击除标点以外的地方,就去掉信息窗口

背景介绍:

需要实现的功能是,点击除标点以外的地方,信息窗口去掉。
信息窗口就是点击地图的标点后,出现在地图旁边的信息框。

具体实现:

是基于海量点实现的,首先用两个全局变量用来记录点击地图的次数点击标点的次数
只要点击地图的次数大于点击标点的次数,就说明鼠标左键没有点击标点,就去掉信息窗口就可以了。

重点是: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;//点击地图
    }

});

自己想的解决办法,可能不够简洁,若有更好的实现办法,可以评论或者私信…
完毕~

你可能感兴趣的:(高德地图,javascript,html5)