此处映射JS API —在移动设备上滚动时禁用平移

Question

我的网页上有一张地图。当我用一根手指在移动设备上滚动页面时，我想防止地图平移。

基本上，我希望“此处”地图的行为类似于移动设备上的Google或Yandex地图-默认情况下，只有在移动设备上用两只手指才能进行地图平移。一根手指平移只会做任何事情，只会滚动页面而不会移动地图。

Answer 1

您可以通过禁用地图的拖动行为来实现类似的目的。

 // boolean to check if map will receive events
    var mapEventsOn = false;

    // to move the page by the amount which was captured by the map canvas 
    map.addEventListener('pointerleave', 
        function(e) 
            { 
                eventEndY = e.currentPointer.viewportY;
                mapEventsOn = false;
                if(!behavior.isEnabled(H.mapevents.Behavior.DRAGGING)){
                    if(eventEndY > eventStartY){
                        setTimeout(function() {
                            window.scrollBy(0,-(eventEndY-eventStartY));
                          }, 0);
                    }else{
                        setTimeout(function() {
                            window.scrollBy(0,(eventStartY-eventEndY));
                          }, 0);


                    }
                }

            }
        );

    // to capture the pixel points from the drag/scroll action on map canvas    
    map.addEventListener('pointerdown', 
            function(e) 
            { 
                eventStartY = e.currentPointer.viewportY;
            }
    );

    // detect the scroll points from map events 
    map.addEventListener('pointerup', 
            function(e) 
            { 
                eventEndY = e.currentPointer.viewportY;
            }
    );


    map.addEventListener('pointercancel', 
            function(e) 
            { 
                mapEventsOn = false;
            }
    );

    map.addEventListener('pointerenter', 
            function(e) 
            { 
                mapEventsOn = true;
            }
    );    

document.addEventListener('touchmove', 
                function(e) 
                {
                    if(mapEventsOn)
                    {
                        var touch = e.touches[0];

                        if(e.touches.length == 1)
                        {
                            behavior.disable(H.mapevents.Behavior.DRAGGING);
                        }

                        if(e.touches.length == 2)
                        {
                            // This means there are two finger move gesture on screen
                            behavior.enable(H.mapevents.Behavior.DRAGGING);
                        }
                    }
                }, 
    false);