Leaflet Routing Machine - Route Control：如何为行程中的每条指令添加点击监听器table？

Question

目前，单击部分路线时的默认操作是放大地图上的该坐标。

我目前正在尝试将文本添加到语音中，以说出该特定部分的说明。

但是如何修改已经内置的点击监听器L.Routing.control？

下面的代码是我的：

var routeControl = L.Routing.control({
                waypoints: [
                    L.latLng(1.2734916210174561, 103.80210876464844),
                    L.latLng(1.314766, 103.765229)
                ],
                routeWhileDragging: true,
                geocoder: L.Control.Geocoder.nominatim({ geocodingQueryParams: { "countrycodes": 'SG' } })

            }).addTo(map);

            routeControl.on('routeselected', function (e) {

                var coord = e.route.instructions;

                if ('speechSynthesis' in window) {

                    for (let i = 0; i < coord.length; i++)
                    {
                        //speak(coord[i].text);
                    }
                }
                else {
                      alert("your broswer does not support text to speech");
                }


            });

而下面这段代码属于原作者，当找到路由时自动加载： https://github.com/perliedman/leaflet-routing-machine/blob/master/src/itinerary.js

_createItineraryContainer: function(r) {
            var container = this._itineraryBuilder.createContainer(),
                steps = this._itineraryBuilder.createStepsContainer(),
                i,
                instr,
                step,
                distance,
                text,
                icon;

            container.appendChild(steps);

            for (i = 0; i < r.instructions.length; i++) {
                instr = r.instructions[i];
                text = this._formatter.formatInstruction(instr, i);
                distance = this._formatter.formatDistance(instr.distance);
                icon = this._formatter.getIconName(instr, i);
                step = this._itineraryBuilder.createStep(text, distance, icon, steps);

                if(instr.index) {
                    this._addRowListeners(step, r.coordinates[instr.index]);
                }
            }

            return container;
        },

        _addRowListeners: function(row, coordinate) {
            L.DomEvent.addListener(row, 'mouseover', function() {
                this._marker = L.circleMarker(coordinate,
                    this.options.pointMarkerStyle).addTo(this._map);
            }, this);
            L.DomEvent.addListener(row, 'mouseout', function() {
                if (this._marker) {
                    this._map.removeLayer(this._marker);
                    delete this._marker;
                }
            }, this);
            L.DomEvent.addListener(row, 'click', function(e) {
                this._map.panTo(coordinate);
                L.DomEvent.stopPropagation(e);
            }, this);
        },

所以我想知道如何访问它以添加我的语音功能

L.DomEvent.addListener(row, 'click', function(e) {
                this._map.panTo(coordinate);
                L.DomEvent.stopPropagation(e);
            }, this);

当它已经被初始化时

Answer 1

在您粘贴的代码中，您可以看到 Leaflet Routing Machine 使用了一种叫做 ItineraryBuilder 的东西，它负责为行程创建 DOM 个元素。

您可以在创建控件时提供自己的 ItineraryBuilder，覆盖默认构建器。使用您自己的自定义实现，您应该能够覆盖 createStep 方法以使其添加您需要的任何侦听器。

一个可能的问题是我看到默认的 click 事件处理程序在事件上调用 stopPropagation，这可能意味着您在 DOM 层次结构中附加了一个更高级别的侦听器不会看到点击事件。如果是这种情况，您将需要一种方法来防止 _addRowListeners 被调用，据我所知目前不存在。

Leaflet Routing Machine - Route Control：如何为行程中的每条指令添加点击监听器table？

Leaflet Routing Machine - Route Control: how to add a click listener to each instructions in the itinerary table?

html

javascript

razor

leaflet

leaflet-routing-machine