在天蓝色地图上，我有以下示例：https ://docs.microsoft.com/en-us/azure/azure-maps/map-events
拖动被正确禁用，但触摸地图时页面根本不滚动任何人都经历过这种情况或以前使用过天蓝色地图。 使用安卓 Chrome 浏览器。
谢谢
问问题
413 次
2 回答
0
好的，我已经弄清楚了如何在触摸在地图顶部时实现地图的两指平移和页面的单指平移。这是一个代码示例：
<!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>
于 2019-03-08T23:00:54.760 回答
0
更新！
波纹管是我的触摸示例，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>
就是这样。现在这对我来说完全有效，因为它应该没有故障
于 2019-03-10T20:44:22.023 回答