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;
});