如何在某个点上将元素定位在SVG路径上？

Question

我一直在寻找关于如何重新创建此页面上显示的地图/图表功能的教程。

当您将光标悬停在直方图上的不同点（显示高程）时，它会在谷歌地图上移动一个图钉/光标，以指示高程与地图相关的点。

如果您点击链接并自己查看，很难解释但更容易。

https://www.greaterhobarttrails.com.au/track/north-south-track/

map & chart

感谢任何指导。

感谢您的时间。

约翰。

Answer 1

以下只是一些指导点，如何处理这项任务（可能不是最佳解决方案，但应该有效）。

作为路径数组中的第一个要求，每个点应该有三个属性 - 纬度，经度，高程。

要构建图表，您需要使用一些图表库 - 它应该支持鼠标悬停事件（这里是图表库的一些示例 - https://www.sitepoint.com/15-best-javascript-charting-libraries/）。 Y轴是高程，X轴可以是距路径起点的距离（应事先计算每个点的距离）。

作为第三步，您需要在地图上显示路径 - 为此，您可以使用google maps api（https://developers.google.com/maps/）。

最后你需要连接图表和地图，你需要从图表中订阅鼠标悬停事件。处理时，您对用户目前正在徘徊的路径点感兴趣。之后，您可以从中获取坐标，并根据这些坐标在地图上添加标记。

Answer 2

我可以通过我自己的插件pathAnimator中的一些帮助方法指出正确的方向：

1. 您需要在底部元素（在您的特定示例中）附加mousemove事件，以便获得x百分比（从0到100）。
2. 使用上述值，使用pathAnimatorm或其任何方法，将标记元素放置在右侧点的地图路径上。 您可以使用pointAt方法，查看上面链接中的演示，您就会明白它是如何完成的。