如何在Google Maps Data Layer上绘制多边形时捕捉事件

Question

在谷歌地图数据图层上绘制多边形时,我想在用户绘制第一个点,第二个点和后续点时处理事件,以便UI可以提供不同的用户指导,例如:

• 没有点画:"点击画第一点"
• 第一点绘制:"点击绘制下一个点"
• 第二点画出:"点击添加另一个点或点击第一个点结束"

使用数据库在数据层上绘制关闭点时,会出现"addfeature"事件.使用绘图库绘制最终点时,会出现不同的事件,例如polygoncomplete.

为了查看是否为第一,第二和后续点发出任何事件,我使用谷歌示例代码显示所有事件并修改它以处理数据层上的绘图事件.新活动是:

'addfeature': 'data layer event',
      'click': 'data layer event',
      'dblclick': 'data layer event',
      'mousedown': 'data layer event',
      'mouseout': 'data layer event',
      'mouseover': 'data layer event',
      'mouseup': 'data layer event',
      'removefeature': 'data layer event',
      'removeproperty': 'data layer event',
      'rightclick': 'data layer event',
      'setgeometry': 'data layer event',
      'setproperty': 'data layer event',
      'circlecomplete': 'This event is fired when the user has finished drawing a circle',
      'markercomplete': 'This event is fired when the user has finished drawig a marker',
      'overlaycomplete': 'This event is fired when the user has finished drawing an overlay of any type',
      'polygoncomplete': 'This event is fired when the user has finished drawing a polygon',
      'polylinecomplete': 'This event is fired when the user has finished drawing a polyline',
      'rectanglecomplete': 'This event is fired when the user has finished drawing a rectangle'
}

http://jsfiddle.net/bunjil/gfp9qntx/9/

事件监听器也得到了增强,还可以监听数据层事件 - 而不仅仅是映射事件.

查看触发的事件,并检查显示的文档,在绘制新多边形时,没有添加点的事件,只是数据层上的mouseup事件.

虽然可以计算mouseup事件,但这可能不是一个强大的解决方案.

我可以看到在添加或移动顶点时,多边形和折线上有一些事件,但这些事件在创建多边形后似乎只存在.

任何人都可以确认这种理解是否正确,或者是否存在我遗漏的事件.

有一个相关的问题似乎确认数据层或地图上没有事件,但您可以在画布上侦听鼠标事件. 如何在Google Maps v3中监听用户绘制多边形的开始？

Answer 1

嗯，看起来人们自 2011 年以来就一直在要求这个。当我写这篇文章时，已经是 2018 年 4 月底了，但它仍然没有被添加，所以……这很不幸。

While not a fantastic solution, I did come up with a workaround that worked for my purposes. My map is inside of a container div tag that is the same size as the map. I added an onclick handler to this.

If you keep track of the map drawing manager's mode in your code, you should be able to count the number of times the click occurs, and use this info as needed. Then on the overlaycomplete event, you could reset the count to zero.

If you need to get at the position of the event, as I did, you can use the event to get the pixel coordinates of the location clicked on the map:

const onClickHandler = (event) => {
  const offset = event.target.getClientRects()[0];
  console.log("x", event.clientX - offset.left);
  console.log("y", event.clientY - offset.top); 
}

With the x and y pixel coordinate, you can get a lat and lng with (this deserves a credit, but I forget where I got it):

const point2LatLng = (point, map) => {
  let topRight = map
    .getProjection()
    .fromLatLngToPoint(map.getBounds().getNorthEast());
  let bottomLeft = map
    .getProjection()
    .fromLatLngToPoint(map.getBounds().getSouthWest());
  let scale = Math.pow(2, map.getZoom());
  let worldPoint = new google.maps.Point(
    point.x / scale + bottomLeft.x,
    point.y / scale + topRight.y
  );
  return map.getProjection().fromPointToLatLng(worldPoint);
};

Update: May 2, 2018

Using mousedown and mouseup event handlers instead of just onclick

I just encountered a nuance with this I figured would be helpful to share. It looks like the Google maps drawing manager doesn't register a vertex when you are drawing a polygon if the position of your cursor changes by more than a pixel when clicking. So, if you click to drop a vertex, then while holding the mouse down, move the cursor by more than a pixel before letting the mouse up, a vertex does not get dropped.

To deal with this, instead of using onclick, I needed to keep track of the position of the mousedown event and compare it to the position of the mouseup event in order to ensure it was within an acceptable tolerance.

In my code, I store the mousedown position (I'm using React, so I store it in my component's state). Then in my mouseup event handler I have this guard clause before I carry out any vertex-was-just-added functionality:

if (
  Math.abs(eventPosition.x - mouseDownPosition.x) > 1 ||
  Math.abs(eventPosition.y - mouseDownPosition.y) > 1
) {
  return;
}

I extracted eventPosition to a method so it could be shared between event handlers:

eventPosition(event) {
  const offset = event.target.getClientRects()[0];
  const x = event.clientX - offset.left;
  const y = event.clientY - offset.top;
  return { x, y };
}

// const eventPosition = this.eventPosition(event);