百度地圖在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;
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章