Карты Azure отключены Перетащите на ощупь - PullRequest
Новая
       40

Карты Azure отключены Перетащите на ощупь

0 голосов
/ 06 марта 2019

На лазурных картах у меня есть примеры: https://docs.microsoft.com/en-us/azure/azure-maps/map-events

Перетаскивание отключено правильно, но страница не прокручивается вообще при прикосновении к карте. Кто-то уже испытывал это или использовал карты лазурного цвета раньше, Использование браузера Android Chrome.

Спасибо

enter image description here

Ответы [ 2 ]

0 голосов
/ 10 марта 2019

ОБНОВЛЕНО!

Ниже приведен мой образец на ощупь, и 2 пальца взаимодействуют с картой, отключают перетаскивание на 1 касание и способную прокрутку.это только для мобильных устройств, поэтому я не проверяю мобильное устройство 2: 

<!DOCTYPE html>
<html>
<head>
    <title>Map Events - Azure Maps Web Control Samples</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" />
    <meta name="description" content="This sample will highlight the name of the events that are firing as you interact with the map." />
    <meta name="keywords" content="map, gis, API, SDK, events, click, mouse, touch, context menu, wheel, zoomed, panned, dragged, pitched, moved" />
    <meta name="author" content="Microsoft Azure Maps" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 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, drag;
        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: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
                }
            });
            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                map.setUserInteraction({dragPanInteraction: false, dblClickZoomInteraction: false});
                map.events.add('touchstart', function (e) {
                    if(e.originalEvent.touches.length === 2) {
                        $('#message').removeClass('messageOverlay');
                        map.setUserInteraction({ dragPanInteraction: true, dblClickZoomInteraction: true });
                    }else {
                        $('#message').addClass('messageOverlay');
                        map.setUserInteraction({dblClickZoomInteraction: false});
                    }
                });
                map.events.add('dragstart', function (e) {
                    if(e.originalEvent.touches.length === 1) {
                        $('#message').addClass('messageOverlay');
                        map.setUserInteraction({dragPanInteraction: false, dblClickZoomInteraction: false});
                    }else {
                        map.setUserInteraction({dragPanInteraction: true, dblClickZoomInteraction: true});
                        $('#message').removeClass('messageOverlay');
                    }
                });
                map.events.add('dragend', function (e) {
                  map.setUserInteraction({dragPanInteraction: false, dblClickZoomInteraction: false});
                });
                map.events.add('touchend', function (e) {
                    $('#message').removeClass('messageOverlay');
                })
            });
        }
    </script>
    <style>
        #message {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            z-index: -1;
            opacity: 0;
            transition: all 0.5s;
            cursor: pointer;
            display: block !important;
            font-size: 23px;
            text-align: center;
            color: #ffffff;
        }
        .messageOverlay {
            transition: all 0.5s;
            background-color: hsla(1, 1%, 1%, 0.5);
            z-index: 1 !important;
            opacity: 1 !important;
        }
    </style>
</head>
<body onload="GetMap()">
<div style="position: relative">
    <div class="" id="message">Use two finger to use the map</div>
    <div id="myMap" style="position:relative;width:100%;min-width:350px;height:400px;"></div>
</div>
<p>Add Lots of new line for scroll</p>
<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>
I am the end
</body>
</html>

Вот и все.Это теперь полностью работает для меня, как и должно без глюков

0 голосов
/ 09 марта 2019

Хорошо, я разобрался, как добиться панорамирования двумя пальцами карты и панорамирования одним пальцем страницы, когда касание находится сверху карты. Вот пример кода: 

<!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

...