javascript - 如何触发 Google map 'DrawingManager' 绘图的*开始*？

Question

在我的基于 Google map 的应用程序中，用户经常需要在 map 上绘制一对同心圆。为此，我正在使用 google.maps.drawing.DrawingManager。在理想情况下，用户正常绘制第一个圆，然后绘制第二个圆的过程自动开始，其中心已经设置。因此，用户只需再点击一次即可绘制第二个圆圈。

这是我尝试过的:

var manager = new google.maps.drawing.DrawingManager({
    map: myMap,
    drawingControlOptions: {
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
    }
});

var phaseOne = true;

google.maps.event.addListener(manager, 'circlecomplete', function (circle) {
    if (phaseOne) {
        phaseOne = false;
        // already in drawing mode, so... just trigger a click event?
        google.maps.event.trigger(myMap, 'click', {
            stop: null,
            latLng: circle.getCenter()
        });
    } else {
        phaseOne = true;
    }
}

但它不起作用。绘制单个圆圈仍然可以正常工作，并且 phaseOne 标志被正确交替。但是事件触发器似乎没有做任何事情。

有什么想法或建议吗？

Answer 1

我终于搞定了!就像 TravJenkins 所说的那样，在绘图模式下所有事件都被禁用，我尝试使用 Google API 但找不到方法。我认真地认为绘图库可以大大改进..

我决定模拟点击事件，保存上一次点击的坐标。

我所要做的就是影响两个变量以在绘制圆时进行检测，另一个变量在第二个停止以防止无限绘制。

代码如下:

var draw = false
var already = false
var event

$('#map').click(function (e) {
  if (draw === true && already === false) {
    already = true;
    click(event.clientX, event.clientY);
    draw = false;
  } else if (draw === false) {
    event = e;
    already = false;
  }
  draw = false
})

function click (x, y) {
  var ev = document.createEvent('MouseEvent')
  var el = document.elementFromPoint(x, y)
  ev.initMouseEvent(
    'click', true, true, window, null, 0, 0,
    x, y,
    false, false, false, false, 0, null
  )
  el.dispatchEvent(ev)
}

google.maps.event.addDomListener(manager, 'circlecomplete', function (circle) {
  draw = true
})