如何捕捉事件时，在谷歌地图数据层绘制多边形

Question

当在谷歌地图数据层上绘制多边形时，我想处理用户绘制第一个点、第二个点和随后的点时发生的事件，以便用户界面可以给出不同的用户指导，例如：

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

使用数据库在数据层上绘制闭合点时，会发生“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月底，我写这篇文章的时候，它还没有被添加，所以。。。那太不幸了。

虽然不是一个奇妙的解决方案，但我确实想出了一个符合我目的的变通方法。我的地图在容器div标签内，该标签与地图大小相同。我为此添加了一个onhtml处理程序。

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

如果您需要获取事件的位置，如我所做的，您可以使用事件获取地图上单击位置的像素坐标：

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

我只是遇到了一个细微的差别，我想这将有助于分享。如果单击时光标的位置更改超过一个像素，则在绘制多边形时，Google maps绘图管理器似乎不会注册顶点。因此，如果单击以放置顶点，则在按住鼠标的同时，在向上移动鼠标之前，将光标移动一个像素以上，顶点不会被放置。

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

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

js prettyprint-override">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);