问题标签 [leaflet-routing-machine]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
512 浏览

javascript - 传单地图实时路线跟踪

我正在做一个类似优步的应用程序。实时跟踪没有问题,但是当我需要将车辆引导到某个地方时,地图上有3个标记。第一个标记实时跟踪。第二个是起点,第三个标记是目标。通常,应该有 2 家杂货店。我的即时位置和目的地。我在某个地方遇到了问题,但我无法解决问题。我该如何解决这个问题?

无需此请求即可进行实时跟踪:

至于路由请求:

我想将它用作导航应用程序。随着您越来越接近目标,路线应该会更新,并且应该只有 2 个标记可见。第一个标记也应该显示我当前的位置。我从上面的脚本代码中得到了经纬度信息,但是没有更新。

谢谢。

0 投票
1 回答
78 浏览

javascript - 传单计算 3 点之间的距离 - 在 javascript 数组对象中搜索

我想从总距离中减去到 Leaflette 航点的距离。我怎样才能做到这一点?

我可以找到第 7 个索引。“到达航点”

但我需要的是索引 0、1、2、3、4、5、6 的距离之和。

例如:

总距离= 1971,7

我怎样才能做到这一点?有没有更简单的方法?

0 投票
1 回答
382 浏览

reactjs - 有没有办法在反应传单中添加“Snap to road”?

我正在寻找使每个标记之间的所有折线“对齐道路”的方法,而不是在点 a 和 b 之间绘制直线。因此,在任何两点之间,我希望将这些点自动放置在最近的道路上(如果标记未放置在道路上),并且希望在两点之间的最短道路上生成一条折线。我刚刚开始研究谷歌地图 API,似乎他们有这个功能,但我不想改变我已经拥有的一切。这是我的代码。

0 投票
1 回答
1702 浏览

javascript - 如何在 React-Leaflet 3 中使用 Leaflet Routing Machine?

react-leaflet 2.8.0 中的旧方法是使用MapLayerand withLeaflet

但现在在反应传单中:

MapLayer从第 3 版起withLeaflet已弃用。

我正在尝试掌握核心文档:https ://react-leaflet.js.org/docs/core-introduction

但以下不起作用,我明白了

提供的对象不是图层。

0 投票
0 回答
82 浏览

leaflet - Leaflet Routing Machine中的SVG路径长度

我正在使用 Leaflet Routing Machine 创建地图路线。

我的要求是,如果有多个位置,如 A、B、C、D、E。我得到从 A 到 E 的 svg 路径的长度。但我需要从 A 到 B、B 到 C、C 到 D 的长度, D 到 E。请帮助某人。

点击查看图片

红色线是 svg 路径。所以,当我点击任何标记时,我需要从巴塞尔到那个标记的长度。我的意思是,我需要从巴塞尔到纳沙泰尔或巴塞尔到伯尔尼或从纳沙泰尔到伯尔尼等的长度。

0 投票
1 回答
265 浏览

angular - 在 Angular 中使用 Leaflet 时缺少属性错误

我正在尝试使用 Leaflet 和 Leaflet Routing Machine。我使用以下命令安装传单和传单路由机,

导入传单并使用它很好,但是当我尝试使用传单路由机器时,它给了我错误。

以下是我的代码,

我使用 webstorm 作为 IDE,我得到 2lineOptionscreateMarker. 我在纯 JavaScript 中有相同的代码,它工作正常,但对于 Angular,它给了我这个错误。

因为lineOptions它说以下,当我添加那些缺少的参数时,错误消失了,但我不想放那些参数。

TS2739:类型'{样式:{颜色:字符串;不透明度:数字;重量:数量;}[]; }' 缺少“LineOptions”类型的以下属性:extendToWaypoints、missingRouteTolerance

因为createMarker它说以下,

TS2345:类型参数'{路由器:MapBox; 航路点:LatLng[]; 显示:假;createMarker: () => null; }' 不可分配给“RoutingControlOptions”类型的参数。对象字面量只能指定已知属性,并且在“RoutingControlOptions”类型中不存在“createMarker”。

既然它在 JavaScript 中工作,为什么它不能在 Angular 中工作?

0 投票
1 回答
297 浏览

angular - 如何从传单弹出html中的复选框onchange调用Angular函数?

我正在使用 Leaflet,但我的标记很少。因此,当将鼠标悬停在标记上时,会打开一个弹出窗口,在该弹出窗口中,有一个复选框。所以我需要的是,每当用户单击该复选框时,它应该更改弹出内容。例如,

复选框名称为更多信息。默认弹出窗口包含悬停后的纬度和经度。当用户单击该复选框时,弹出窗口应显示城市、州以及纬度和经度。我在复选框中创建了一个带有onchange事件内部函数的复选框,但它没有调用创建的角度函数,而是在寻找 JavaScript 函数。我怎样才能调用 Angular 函数,或者是否有任何其他解决方法来实现它?

我用过以下方法,

我的示例代码看起来像这样

0 投票
1 回答
172 浏览

reactjs - 如何使用反应钩子将路由坐标动态传递给传单路由

我正在尝试创建一个应用程序,该应用程序将从自动完成框中获取源和目标位置,并且地图显示了两点之间的路线:

截屏:

我使用了两个 useState 来存储 Source 和 Destination 的值。之后,我将这两个值作为道具传递给我的路由组件。但问题是,在我的路由组件中,我收到目的地的道具数据为“未定义”。

请在此处找到我的沙盒代码。

注意:在上面的代码中,我现在直接设置了目的地的坐标。

我无法弄清楚为什么它会这样。有没有办法做到这一点?

0 投票
0 回答
27 浏览

typescript - 如何让美国各州穿越或靠近传单中的路线?

我正在使用带有地图的传单 js 。我需要知道我是否有一条路线,例如从佛罗里达到纽约,我如何才能获得与该路线相交的州?我在opendatasoft中研究了这个州的边界。谁能解释我如何实现这一目标?提前致谢。

0 投票
1 回答
119 浏览

react-leaflet - 使用 spliceWayPoints 仅删除/删除路线而不是路线点

我正在将传单用于地图并使用传单路由机在位置之间创建路线。

但无法找到操纵航点的方法。这样我就可以隐藏两点之间的路线。如果只有 2 个位置,那么它会完全正常工作,因为它会删除完整的连接。但是如果我们要创建 3 个路线点,那么第 2 个点将充当 1 和 3 之间的中间点,并且使用拼接路点功能,它会清除完整的点而不仅仅是路线。

routingControl.getPlan().setWaypoints([]); 使用它来设置传单地图的路线点。

有没有一种方法/功能可以让我们只控制两个点之间的路线而不是点/位置本身的添加/删除?

附上删除点的功能快照。 在此处输入图像描述

非常感谢社区的任何帮助!