Question

我正在尝试使用Google地图来允许用户创建多个可编辑/可拖动的多边形。一切都可以从桌面浏览器中正常工作，但在移动/触控设备上，一旦用户向地图添加新多边形，所有多边形都不再可拖动。初始化期间在地图上加载的多边形可按预期拖动。

我知道谷歌地图api并不真正支持触摸事件，但是我可以做一个解决方法吗？

简化示例：

function initMap() {
  var map = new          google.maps.Map(document.getElementById('map'), {
  zoom: 5,
  center: {lat: 24.886, lng: -70.268},
  mapTypeId: 'terrain'
});

var triangleCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757},
  {lat: 25.774, lng: -80.190}
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true
});
bermudaTriangle.setMap(map);

var drawingManager = new google.maps.drawing.DrawingManager({
   drawingMode: google.maps.drawing.OverlayType.MARKER,
   drawingControl: true,
   drawingControlOptions: {
     position: google.maps.ControlPosition.TOP_CENTER,
     drawingModes: ['polygon']
   },
   polygonOptions: {
     fillColor: '#ffff00',
     fillOpacity: 1,
     strokeWeight: 5,
     draggable: true,
     zIndex: 10000
    }
 });
 drawingManager.setMap(map);

 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
   drawingManager.setOptions({
      drawingMode: null
   });
 });  

}

google.maps.event.addDomListener(window, 'load', initMap);

https://codepen.io/cyberjus/pen/XEVoer

从移动设备加载后，第一个多边形可以拖动，但是一旦绘制了另一个多边形，就不能再拖动它们了。我正在测试一个真正的iPad，所以我不知道它是否是IOS特定的。

手机上的谷歌地图绘图失去了可拖拽性

0 个答案: