百度地图支持windows触摸屏手势代码

//地图在触摸屏上放大缩小
var mapDom = document.getElementById('cheliangditu');
_offsetHeight = mapDom.offsetHeight;
_offsetWidth = mapDom.offsetWidth;
let _touchPoint,_touchStartDistance,_isPinch,_touchEndDistance;

document.getElementById("cheliangditu").addEventListener("touchstart", function(e){
    e.preventDefault();
    //console.log(e.touches.length);
    if(e.touches.length ==1){
        _touchPoint = {
            x:e.touches[0].pageX,
            y:e.touches[0].pageY
        };
    }else if(e.touches.length == 2){
        let xDistance = e.touches[0].pageX - e.touches[1].pageX;
        let yDistance = e.touches[0].pageY - e.touches[1].pageY;
        _touchStartDistance = Math.abs( Math.pow((xDistance * xDistance + yDistance * yDistance), 0.5));
    }
});
document.getElementById("cheliangditu").addEventListener("touchmove", function(e){
    e.preventDefault();
    console.log(e.touches.length);
    if(e.touches.length == 1){
        if(!_touchPoint) return;
        var dx = e.touches[0].pageX - _touchPoint.x;
        var dy = e.touches[0].pageY - _touchPoint.y;
        map.panBy(dx,dy,{
            noAnimation : true
        });
        _touchPoint.x = e.touches[0].pageX;
        _touchPoint.y = e.touches[0].pageY;
    }
    else if(e.touches.length == 2){
        _isPinch = true;
        let xDistance = e.touches[0].pageX - e.touches[1].pageX;
        let yDistance = e.touches[0].pageY - e.touches[1].pageY;
        _touchEndDistance = Math.abs( Math.pow((xDistance * xDistance + yDistance * yDistance), 0.5));
    }
});
document.getElementById("cheliangditu").addEventListener("touchend", function(e){
    e.preventDefault();
    if(_isPinch){
        if(_touchEndDistance > _touchStartDistance && Math.abs(_touchEndDistance-_touchStartDistance)>50){
            map.zoomIn();
        }else if(_touchEndDistance < _touchStartDistance && Math.abs(_touchEndDistance-_touchStartDistance)>50){
            map.zoomOut();
        }
        _touchEndDistance = 0;
        _isPinch = false;
    }
    _touchPoint = null;
});
 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值