google-maps - 在 Google map 数据层上绘制多边形时如何捕捉事件

Question

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

未绘制点:“单击以绘制第一个点”

绘制的第一个点:“单击以绘制下一个点”

绘制的第二个点:“单击添加另一个点或单击第一个点结束”

当使用数据库在数据层上绘制闭合点时，会出现“addfeature”事件。
当使用绘图库绘制最终点时，会出现不同的事件，例如多边形完成。

为了查看是否为第一点、第二点和后续点发出任何事件，我使用谷歌示例代码来显示所有事件并将其修改为处理数据层上的绘图事件。新事件是:

'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/

事件监听器也得到了增强，可以监听数据层事件——而不仅仅是 map 事件。

查看触发的事件，并检查文档，发现在绘制新多边形时没有添加点的事件，只有数据层上的 mouseup 事件。

虽然可以计算 mouseup 事件，但这可能不是一个可靠的解决方案。

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

任何人都可以确认这种理解是否正确，或者是否有我遗漏的事件。

有一个相关的问题似乎确认数据层或 map 上没有事件，但您可以在 Canvas 上监听鼠标事件。
How can I listen for the start of a user drawing a polygon in Google Maps v3?

Answer 1

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

虽然不是一个很棒的解决方案，但我确实想出了一个适合我的目的的解决方法。我的 map 位于与 map 大小相同的容器 div 标签内。我为此添加了一个 onclick 处理程序。

如果您在代码中跟踪 map 绘制管理器的模式，您应该能够计算单击发生的次数，并根据需要使用此信息。然后在overlaycomplete事件，您可以将计数重置为零。

如果你需要获取事件的位置，就像我做的那样，你可以使用事件来获取 map 上点击位置的像素坐标:

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

使用 x 和 y 像素坐标，您可以获得 lat 和 lng(这值得称赞，但我忘记了我从哪里得到的):

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

更新:2018 年 5 月 2 日

使用 mousedown和 mouseup事件处理程序而不仅仅是 onclick
我刚刚遇到了一个细微差别，我认为分享会有所帮助。如果单击时光标位置的变化超过一个像素，则在绘制多边形时，Google map 绘图管理器似乎不会注册顶点。因此，如果您单击以放置一个顶点，然后在按住鼠标的同时将光标移动一个像素以上，然后再松开鼠标，则顶点不会被放置。

为了解决这个问题，而不是使用 onclick ，我需要跟踪 mousedown 的位置事件并将其与 mouseup 的位置进行比较事件，以确保它在可接受的容差范围内。

在我的代码中，我存储了 mousedown位置(我使用的是 React，所以我将它存储在组件的状态中)。然后在我的 mouseup事件处理程序 在执行任何 vertex-was-just- added 功能之前，我有这个保护子句:

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

我提取了 eventPosition到一个方法，以便它可以在事件处理程序之间共享:

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