Question

我有好几天没有这个运气。我正在使用leaflet 1.4.0以及leaflet.draw 1.0.4。我没有使用L.control.draw UI，而是使用自己的按钮创建多边形和矩形。即使您切换了最新的Chrome浏览器来模拟移动设备（使用“ toogle设备”工具栏），它也可以在桌面浏览器（当然是IE除外）上完美运行，但在iPad，Android平板电脑（我尚未在手机上检查）上无法正常运行（在开发工具上）失败。

我创建了这个jsfiddle来说明问题：https://jsfiddle.net/fsv8jegd/2/

在关闭“切换设备”的情况下使用Chrome，点击“开始多边形”按钮。光标变为十字形，并带有标签“单击并拖动以绘制矩形”。单击“取消”按钮，光标将返回到常规箭头。

现在，在Chrome开发者工具上打开“切换设备”，然后选择“响应式”或任何“ iPhone”或“ iPad”。点击“开始多边形”按钮。光标更改为十字架。尝试单击“取消”按钮。什么都没发生。它没有收到点击事件。取消此操作的唯一方法实际上是绘制矩形。

有什么想法吗？

谢谢！

html：

<div id="map"> </div>
<button class='buttons' type="button" style="top:0" onclick="startpoly()">START POLY</button>
<button class='buttons' type="button" style="top:20px" onclick="cancelpoly()">CANCEL</button>

css：

#map { height: 200px !important; width: 80%; }
.buttons {position: absolute; left: 0; z-index: 999999}

JS：

polygon_query_options = { shapeOptions: { stroke: true, color: '#6e83f0', weight: 4, opacity: 0.9, fill: true, fillColor: null, fillOpacity: 0.2, clickable: false, dashArray: '10,10' } };

$(document).ready(function() {
  map = L.map('map', { preferCanvas: true, zoomControl: true,  zoom: 10, maxZoom: 20, center: [29.8, -95.5]});

  var drawnItems = new L.FeatureGroup();
  drawnItems.addTo(map);
  drawnItems.bringToFront();

  L.Browser.touch = true;

  var baseMapGroup = new L.featureGroup();

  basemapLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20  });
  basemapLabelLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20  });

  basemapLabelLayer.addTo(map);
  basemapLabelLayer.bringToBack();

  basemapLayer.addTo(map);
  basemapLayer.bringToBack();

  map.on('draw:created', function (e) {
     var layer = e.layer;
     drawnItems.addLayer(layer);
  });
});

function startpoly() {
  polygonDrawer = new L.Draw.Rectangle(map, polygon_query_options);
  polygonDrawer.enable();
};

function cancelpoly() {
  if (polygonDrawer != undefined) { polygonDrawer.disable(); }
};

Answer 1

我发现这是leaflet.draw库上的错误。因此，我遵循了该路径，并在leaflet.draw 1.0.4的第1260行中，以下代码导致了问题：

document.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

我用以下代码替换了该行：

var tempMap = document.getElementById("map");
tempMap.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

基本上，现在它仅应用于地图对象，而不是阻止文档上的touchstart事件。

希望这对在那里的人有帮助。

宣传单张防止在活动状态下单击元素

1 个答案: