百度地图v3.0如何手动写双指缩放和单指拖动事件？

Question

使用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) {

})

Answer 1

既然你已经实现，这是一些优化，优化重绘和缩放体验的：

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

Answer 2

虽说有点僵硬，但是还是能用的
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));
        };