百度地图在Pc端无法缩放平移地图

dom实现对手指触摸事件的处理,详细见代码;

 


 
var mapDom = document.getElementById('map');
        _offsetHeight = mapDom.offsetHeight;
        _offsetWidth = mapDom.offsetWidth;

        document.getElementById("map").addEventListener("touchstart", function(e){
            //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("map").addEventListener("touchmove", function(e){
            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));
                //方案2试了没成功--注释掉
//                if(_isZoomed && _touchEndDistance > 50){
//                    _isZoomed = false;
//                    var top_Left_Point = new BMap.Pixel(0,0);
//                    var top_Right_Point = new BMap.Pixel(_offsetWidth,0);
//                    var bottom_Left_Point = new BMap.Pixel(0,_offsetWidth);
//                    var bottom_Right_Point = new BMap.Pixel(_offsetHeight,_offsetWidth);
//
//                    top_Left_Point.x = top_Left_Point.x + xDistance;
//                    top_Left_Point.y = top_Left_Point.y + yDistance;
//
//                    top_Right_Point.x = top_Right_Point.x + xDistance;
//                    top_Right_Point.y = top_Right_Point.y + yDistance;
//
//                    bottom_Left_Point.x = bottom_Left_Point.x + xDistance;
//                    bottom_Left_Point.y = bottom_Left_Point.y + yDistance;
//
//                    bottom_Right_Point.x = bottom_Right_Point.x + xDistance;
//                    bottom_Right_Point.y = bottom_Right_Point.y + yDistance;
//
//                    var mapPoint1 = map.pixelToPoint(top_Left_Point);
//                    var mapPoint2 = map.pixelToPoint(top_Right_Point);
//                    var mapPoint3 = map.pixelToPoint(bottom_Left_Point);
//                    var mapPoint4 = map.pixelToPoint(bottom_Right_Point);
//                    var points = [mapPoint1,mapPoint2,mapPoint3,mapPoint4];
//                    console.log(points);
//                    map.setViewport(points,{
//                        enableAnimation : true
//                    });
//                }
            }
        });
        document.getElementById("map").addEventListener("touchend", function(e){
            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;
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值