Javascript 如何在SVG路径的某一点上定位元素？

我已经搜索了几个小时的教程，了解如何重新创建此页面上显示的地图/图表功能

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

很难解释，但如果你点击链接，自己看看，会更容易

感谢您的指导

谢谢你抽出时间

---

John。

以下只是一些指导要点，以及如何完成这项任务（可能不是最好的解决方案，但应该可行）

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

要构建图表，您需要使用一些图表库-它应该支持mouseover事件（以下是一些图表库示例-）。Y轴是高程，X轴可以是距离路径起点的距离（应事先计算每个点的距离）

作为第三步，您需要在地图上显示您的路径—为此，您可以使用GoogleMapsAPI（）

---

最后，您需要连接图表和地图，还需要从图表中订阅鼠标悬停事件。在处理这个问题时，您感兴趣的是用户当前悬停在哪个路径点上。之后，您可以从中获取坐标，并根据这些坐标在地图上添加一个标记。

我可以使用我自己的插件中的一些帮助方法为您指出正确的方向：

您需要在底部元素上附加一个

mousemove

事件（在您的特定示例中），以便获得

x

百分比（从

0

到

100

）

使用上述值，使用pathAnimatorm或其任何方法，将标记元素放置在地图路径的正确点上。 您可以使用

pointAt

方法，查看上面链接中的演示，您将了解它是如何完成的

---

也许我的微型库将是一个辅助工具，请编写描述问题的标题，而不是一般化的标题。基本上，您可以使用我的pathAnimator插件在地图上的正确位置设置您的点，因为您知道底部图表的

x

百分比（使用pageX鼠标事件参数）然后你可以在地图的路径上放置一些指针。简单。有一个版本的示例具有该功能（看起来它不再这样做了）。