百度地图v3.0如何手动写双指缩放和单指拖动事件？
使用touchstart、touchmove、touchend监听事件写百度地图api的v3.0的双指缩放和单指拖动地图的功能代码怎么写？
let map = new BMap.Map("map")
const mapContainer = document.getElementById('map')
mapContainer.addEventListener('touchmove', function(event){
})
mapContainer.addEventListener('touchstart', function(event) {
})
mapContainer.addEventListener('touchend', function(event) {
})
回答：
虽说有点僵硬，但是还是能用的let map = new BMap.Map("map")
const mapContainer = document.getElementById('map')
let startZoom,firstDistance,startLng, startLat,startClientX,startClientY,startDistance;
mapContainer.addEventListener('touchstart', function(event) {
const touches = event.touches;
if (touches.length == 1) {
startClientX = event.changedTouches[0].clientX;
startClientY = event.changedTouches[0].clientY;
startLng = vm.map.getCenter().lng; // 记录地图中心点经度
startLat = vm.map.getCenter().lat; // 记录地图中心点纬度
startZoom = vm.map.getZoom(); // 记录地图缩放等级
}else if(touches.length > 1){ //判断是否是两指
const events1 = touches[0];
const events2 = touches[1];
startZoom = vm.map.getZoom();
const one = {
x:events1.pageX, //第一根手指的横坐标
y:events1.pageY, //第一根手指的横坐标
}; //第一根手指的横坐标
const two = {
x:events2.pageX, //第二根手指的横坐标
y:events2.pageY, //第二根手指的横坐标
};
firstDistance = getDistance(one,two);
}
event.preventDefault();
})
mapContainer.addEventListener('touchmove', function(event){
event.preventDefault();
const touches = event.touches;
if(touches.length>1){
const events1 = touches[0];
const events2 = touches[1];
const one = {
x:events1.pageX, //第一根手指的横坐标
y:events1.pageY, //第一根手指的横坐标
}; //第一根手指的横坐标
const two = {
x:events2.pageX, //第二根手指的横坐标
y:events2.pageY, //第二根手指的横坐标
};
const distance = getDistance(one,two);
let aa = distance / firstDistance
var zoom
if(aa<1){
zoom = startZoom-1
}else{
zoom = startZoom+1
}
// const zoom = startZoom + (distance / firstDistance)
vm.map.setZoom(zoom);
}else if(touches.length==1){
// if (event.touches.length == 0) {
// 计算结束触摸时的位置和开始触摸时的位置之间的距离和方向
var x1 = event.changedTouches[0].clientX;
var y1 = event.changedTouches[0].clientY;
var x2 = startClientX;
var y2 = startClientY;
var dx = x2 - x1;
var dy = y2 - y1;
// 根据距离和方向调整地图中心点位置
var mercatorLng = startLng + dx / Math.pow(2, vm.map.getZoom() + 8) * 360;
var mercatorLat = startLat - dy / Math.pow(2, vm.map.getZoom() + 8) * 360 / Math.PI * 2;
vm.map.setCenter(new BMap.Point(mercatorLng, mercatorLat));
// }
}
})
const getDistance = (start, stop) => { //计算两根手指之间的距离
return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
};
回答：
既然你已经实现，这是一些优化，优化重绘和缩放体验的：
let map = new BMap.Map("map");const mapContainer = document.getElementById("map");
let startZoom, firstDistance, startLng, startLat, startClientX, startClientY, startDistance, isUpdating = false;
mapContainer.addEventListener("touchstart", function (event) {
const touches = event.touches;
if (touches.length === 1) {
// 单指操作
startClientX = event.changedTouches[0].clientX;
startClientY = event.changedTouches[0].clientY;
startLng = map.getCenter().lng;
startLat = map.getCenter().lat;
startZoom = map.getZoom();
} else if (touches.length > 1) {
// 双指操作
const events1 = touches[0];
const events2 = touches[1];
startZoom = map.getZoom();
const one = { x: events1.pageX, y: events1.pageY };
const two = { x: events2.pageX, y: events2.pageY };
firstDistance = getDistance(one, two);
}
event.preventDefault();
});
mapContainer.addEventListener("touchmove", function (event) {
event.preventDefault();
if (!isUpdating) {
isUpdating = true;
requestAnimationFrame(() => {
const touches = event.touches;
if (touches.length === 1) {
// 单指操作
var x1 = event.changedTouches[0].clientX;
var y1 = event.changedTouches[0].clientY;
var x2 = startClientX;
var y2 = startClientY;
var dx = x2 - x1;
var dy = y2 - y1;
var mercatorLng = startLng + dx / Math.pow(2, map.getZoom() + 8) * 360;
var mercatorLat = startLat - dy / Math.pow(2, map.getZoom() + 8) * 360 / Math.PI * 2;
map.setCenter(new BMap.Point(mercatorLng, mercatorLat));
} else if (touches.length > 1) {
// 双指操作
const events1 = touches[0];
const events2 = touches[1];
const one = { x: events1.pageX, y: events1.pageY };
const two = { x: events2.pageX, y: events2.pageY };
const distance = getDistance(one, two);
const zoom = startZoom + Math.log2(distance / firstDistance);
map.setZoom(zoom);
}
isUpdating = false;
});
}
});
const getDistance = (start, stop) => {
return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
};
以上是 百度地图v3.0如何手动写双指缩放和单指拖动事件？ 的全部内容， 来源链接： utcz.com/p/934230.html
