如何在 Google 地图数据层上绘制多边形时捕捉事件

Question

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

• 没有绘制点：“点击绘制第一个点”
• 绘制的第一个点：“点击绘制下一个点”
• 绘制的第二个点：“单击添加另一个点或单击第一个点结束”

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

要查看是否针对第一个、第二个和后续点发出任何事件，我使用 google 示例代码来显示所有事件并对其进行修改以处理数据层上的绘图事件。新事件是：

'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 事件，但这可能不是一个可靠的解决方案。

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

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

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

Answer 1

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

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

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

如果需要获取事件的位置，和我一样，可以使用事件获取地图上点击位置的像素坐标：

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 地图绘图管理器似乎不会注册顶点。因此，如果您单击以放下一个顶点，然后在按住鼠标的同时将光标移动超过一个像素，然后再放开鼠标，则不会放下一个顶点。

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

在我的代码中，我存储了 mousedown 位置（我使用的是 React，所以我将它存储在组件的状态中）。然后在我的mouseup 事件处理程序中，在执行任何刚刚添加的顶点功能之前，我有这个保护子句：

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