Question

请查看下面的代码。它在地图上画了一个圆圈。如果用户点击鼠标或点击手指（在移动设备上）进入圈子并将其拖动，则应在地图上移动圈子。

适用于桌面版Firefox，桌面版Chrome，移动版Firefox。但移动Chrome浏览器不。我认为Mobile Firefox中的代码可能正常工作，因为浏览器模拟鼠标输入的触摸输入，这当然在Leaflet中运行良好。

所以我需要帮助如何在Leaflet中最好地实现触摸事件（与鼠标事件并行）。 Leaflet的Doc中没有提到触摸事件。但我认为通常的Javascript DOM事件也应该有用吗？（ touchstart，touchmove，touchend ）。但不是我的代码编写方式在Chrome移动设备中。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Eventtest</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

	circle = L.circle([51.508, -0.11], 500, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.5
	}).addTo(mymap);

	circle.on('mousedown touchstart', onCircleDown);
	
	function onCircleDown (e1) {
		mymap.dragging.disable();
		var mouseStartingLat = e1.latlng.lat;
		var mouseStartingLng = e1.latlng.lng;
		var circleStartingLat = e1.target._latlng.lat;
		var circleStartingLng = e1.target._latlng.lng;
		circle.on('mousemove', function (e2) {
				var mouseNewLat = e2.latlng.lat;
                var mouseNewLng = e2.latlng.lng;
                var latDifference = mouseNewLat - mouseStartingLat;
                var lngDifference = mouseNewLng - mouseStartingLng;
                var currentCircleCoords = L.latLng (circleStartingLat + latDifference, circleStartingLng + lngDifference);
                e1.target.setLatLng (currentCircleCoords);
		});
		circle.on ('mouseup', function () { 
                    circle.off('mousemove');
					mymap.dragging.enable();
                });
	}

</script>
</body>
</html>

＆＃13;

宣传单：如何处理触摸事件（例如在移动设备上）

0 个答案: