百度地图H5应用区分点击和滑动事件

 

在调用百度地图API做开发的时候，有时需要在地图上添加点击事件，点击地图上某一点触发某个动作。

在web端，点击事件用map.addEventListener("click,function(e){})绑定即可。

但如果是H5项目，你会发现在手机上百度地图的click事件是不灵敏的，这是因为百度地图网页版在PC端和手机端有不同的处理，手机端屏蔽了click事件，默认拖动事件。所以我们在做手机端的项目的时候不应使用map.addEventListener("click,function(e){})，而应使用map.addEventListener("touchstart",function(e){}触摸事件。

但这样的话就又有一个问题，也许我们只是想滑动一下地图，并不想触发点击地图上某一点触发的事件，但只要我们的手指触碰到屏幕，事件就会被触发。

如何区分点击事件和滑动事件，使得在滑动手机屏幕的时候不触发点击事件呢？

我的解决办法是，在触发滑动事件的时候（touchmove）记录开始和结尾的横纵坐标，在手指抬起的时候（touchend）根据横纵坐标计算滑动平移的距离，如果距离不为0，说明是滑动事件，不触发动作，如果等于0，说明是点击事件，触发动作。

上代码：

window.onload = function () {
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));     
    map.setCurrentCity("北京");   

    var xArr = [];//存放横坐标
    var yArr = [];//存放纵坐标
    map.addEventListener("touchstart", function(e){ 
        //手指触摸屏幕的时候清空两个数组
        xArr.length = 0;
        yArr.length = 0;
    }); 

    map.addEventListener("touchmove",function(e){
        //如果滑动了屏幕，xArr和yArr将各存入两个坐标值，即始末坐标值
        xArr.push(e.targetTouches[0].pageX);
        yArr.push(e.targetTouches[0].pageY);
    });

    map.addEventListener('touchend',function(e){
        var far;
        var flag = true;
        //计算平移距离，区分滑动事件和点击事件
        if((xArr.length > 1) && (yArr.length > 1)){
            far = (Math.abs(xArr[0]-xArr[1]))^2 + (Math.abs(yArr[0]-yArr[1]))^2;
            if(far > 0){
                flag = false;
            }
        }
        if(flag){
            //获取经纬度
            var pt = e.point;
            //创建一个标注，经纬度是当前点击位置
            var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
            //将新的标注添加到地图上时先清空其他的标注
            map.clearOverlays();
            //将标注添加到地图上
            map.addOverlay(marker);
        }
    });
};

 

 

作者：罂粟1995
链接：https://www.jianshu.com/p/153cd2471576
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。