如何触发Google Maps'DrawingManager'绘图的* start *？ [英] How to trigger the *start* of a Google Maps 'DrawingManager' drawing?

问题描述

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

In my Google Maps based application, users often have to draw a pair of concentric circles on the map. I'm using the google.maps.drawing.DrawingManager for this. In the ideal scenario, a user draws the first circle normally, and then the process of drawing the second circle starts automatically, its center already set. So the user would only need one additional click to draw the second circle.

以下是我试过的：

Here's what I tried:

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 标志正在交替进行。但事件触发器似乎没有做任何事情。

But it doesn't work. Drawing single circles still works fine, and the phaseOne flag is being properly alternated. But the event trigger doesn't seem to do anything.

任何想法或建议？

Any thoughts or suggestions?

推荐答案

我终于搞定了！就像TravJenkins说的那样，在绘图模式下所有的事件都被禁用了，我试着去玩Google API，但是找不到方法去做我认真地认为绘图库可以大大提高oved ..

I've finally got it work ! Like TravJenkins says, all the events are disabled while in drawing mode, I've try to play around with the Google API but can't find a way to do it. I seriously thinks that the Drawing Library can be greatly improved..

我已决定模拟点击事件，保存之前点击的坐标。

I've decided to emulate a click event, saving the coordinates of the previous click.

我所要做的就是影响两个变量，以便在圆形绘图时检测到，另一个变量在第二个时候停止以防止无限绘图。

All I have to do is to affect two variables to detect while a circle is drawing and another to stop at the second to prevent infinite drawing.

以下是代码：

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
})

这篇关于如何触发Google Maps'DrawingManager'绘图的* start *？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！