Javascript SVG/矢量地图室内导航路由

我一直在网上搜索关于如何为基于SVG的室内平面图实现我自己的点对点导航系统的教程或方法。我在网上搜索过，但唯一的选择是谷歌地图。但是，我使用Illustrator创建了地图，并使用路径/向量将其作为SVG图像。我不需要为用户实现任何导航指令，只需要从一个点到另一个点的简单路线。必须有一种方法使用矢量在地图上绘制导航路径可以轮流使用的点等

有什么建议吗

---

谢谢

您可以使用JS和CSS操作SVG，这样可以添加更多与SVG的交互。SVG是一种XML，可以用JS作为普通DOM树进行遍历，因此您可以创建函数来处理您的需求。您甚至可以将创建的SVG作为图层放置在Google地图中

---

本文使用了一个简单的FloorMaps示例

是的！您可以使用JavaScript实现这一点，还可以添加事件监听器，并执行与普通HTML页面类似的其他DOM操作。（关于如何在给定两点的SVG上画一条线，请参见本答案的底部。）

我正在做一个项目，就是这样。用户可以输入他们的起始房间号和目标房间号，路线绘制在SVG上

这有点乏味，但我们所做的是在SVG上放置圆形元素。每个门口外都有元素，走廊交叉口也有元素

一个典型的元素如下所示

    <circle
        id="route3287-1"
        style="fill:#000000;stroke:none"
        cx="2014.0000"
        cy="239.6"
        r=".05"
        data-neighbors="route3296-1,06-07" />

    var newElement = svg.createElementNS('http://www.w3.org/2000/svg', 'path');
     newElement.setAttribute('d', 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2);
     newElement.style.stroke = '#000000';
     newElement.style.strokeWidth = '15px'; 
     svg.appendChild(newElement);