我最近开始了一个小项目，涉及在Leaflet地图上绘制运输方案。我有一个表示停靠点的集合（数组），每个点都有一个属性location（LatLng）。如何在不使用原生标记的情况下将它们放置在地图上，而是使用带路径和SVG的SVG图层。相反，并确保在每次拖动或缩放地图时保证元素的正确地理位置？
到目前为止，我已经想过：
在地图上的叠加窗格中使用Leaflet提供的SVG叠加层。这种方法的问题在于我感觉它是专为标记，折线等原生元素设计的等等，但不适用于自定义SVG元素（我还没有找到很多信息）。此外，每次我缩放地图和＆amp; out，其元素＆＃39;坐标似乎不一致＆amp;一直不同。
将SVG叠加层添加到地图窗格顶部的地图容器中。这看起来很好，您可能确定Leaflet不会损坏＆＃39;你的叠加层以任何方式，直到你发现SVG不可拖动。这似乎有2个解决方案：
2.1。将地图容器的变换traslate3d值分配给叠加层。这似乎工作＆amp;它的工作同时取代了地图图块层和叠加创建幻觉，就好像它们被绑定在一起一样。每个点现在在SVG上具有恒定位置，只要地图没有被缩放，这等于其在容器上的预计位置减去容器＆amp; s之间的差异。叠加层的左上角。因此，假设叠加层应适合所有点和用户被显示在地图的中心，SVG应该从屏幕开始，因此具有负值x＆amp; y属性＆＃39;或left＆amp; top CSS属性。实际上，它们似乎都没有正常工作，因为地图的尺寸为零或仅适合左上角（在原始视口之外）的极少数点的尺寸。
2.2。 创建一个覆盖地图整个图块层的大型SVG覆盖图。它与之前的解决方案几乎相同，但现在可以直接将点投影到图块层上，从而消除了需要计算容器＆amp; amp;叠加层的位置始终不同。与上述负值相同的问题。
2.3。 在地图容器内使用静态SVG叠加层＆amp;重新计算所有元素在拖动/缩放上的位置。，这会导致传单中的本地＆＃39;叠加方法＆amp;似乎计算成本很高。
那么，有没有更好的方法来实现这一目标（没有D3，因为我想要一个更多的本地解决方案）或者我只是做一些根本错误的事情阻止我实现目标？
CSS＆amp;元素定位一直是我的弱点，所以我不太熟悉使用SVG的x＆amp;的负值的副作用。 y属性，left＆amp; CSS中的top和transform＆＃39; s translate＆amp;将它们组合在一起似乎让我很困惑。