uiscrollview - Azure Maps 禁用触摸拖动

好的，我已经弄清楚了如何在触摸在地图顶部时实现地图的两指平移和页面的单指平移。这是一个代码示例：
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=2" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=2"></script>

    <script type='text/javascript'>
        var map, datasource;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Restrict the map to two finger panning only.
            RestrictMapToTwoFingerPan(map);
        }

        function RestrictMapToTwoFingerPan(map) {
            var pointerCount = 0;

            //Monitor the drag start event.
            map.events.add('dragstart', function (e) {
                //Determine if the drag event is due to touch.
                if (e.originalEvent && pointerCount === 1) {
                    //If there is only one touch point, disable drag panning by disablling, then re-enabling to cancel the current pan request.
                    //Disable then re-enable the drag panning. This will cancel the single touch drag functionality.
                    map.setUserInteraction({ dragPanInteraction: false });
                    map.setUserInteraction({ dragPanInteraction: true });
                }
            });

            //Add touch events to the map container and monitor the movement and move the page accordingly when there is a single touch.

            var pageX = 0;
            var pageY = 0;
            var scale = 1;

            var mapDiv = map.getMapContainer();  

            var touchStartHandler = function (e) {
                var px, py;
                if (window.PointerEvent) {
                    if (e.pointerType !== 'touch') {
                        return;
                    }

                    pointerCount++;
                    px = e.pageX;
                    py = e.pageY;
                } else {
                    pointerCount = e.touches.length;
                    px = e.touches[0].pageX;
                    py = e.touches[0].pageY;
                }

                if (pointerCount === 2) {
                    e.stopImmediatePropagation();
                    e.preventDefault();
                    return;
                }

                pageX = px;
                pageY = py;
            };

            var touchMoveHandler = function (e) {
                var px, py;
                if (window.PointerEvent) {
                    if (e.pointerType !== 'touch') {
                        return;
                    }

                    px = pageX - e.screenX;
                    py = pageY - e.screenY;
                } else {
                    pointerCount = e.touches.length;
                    px = pageX - e.touches[0].screenX;
                    py = pageY - e.touches[0].screenY;
                }

                if (pointerCount === 2) {
                    return;
                }

                if (scale === e.scale) {
                    e.stopImmediatePropagation();
                    e.preventDefault();
                }

                scale = e.scale;

                window.scrollTo(px, py);
            };

            //Add support for Pointer Events and fallback onto touch events. Edge only supports pointer events, and Safari only supports touch events. Chrome supports both.
            if (window.PointerEvent) {
                mapDiv.addEventListener('pointerdown', touchStartHandler, false);

                mapDiv.addEventListener('pointerup', (e) => {
                    if (e.pointerType === 'touch') {
                        pointerCount--;
                    }
                }, false);

                mapDiv.addEventListener('pointermove', touchMoveHandler, false);
            } else {
                mapDiv.addEventListener('touchstart', touchStartHandler, false);
                mapDiv.addEventListener('touchmove', touchMoveHandler, false);
            }
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;height:600px;"></div>

    <br /><br />Adding several new lines so that the sample can be scrolled.<br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
你可以在这里试试这个：https ://azuremapscodesamples.azurewebsites.net/index.html?sample=Limit%20Map%20to%20Two%20Finger%20Panning
uiscrollview - Azure Maps 禁用触摸拖动

问题描述

解决方案

推荐阅读
