0

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

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

但是如何修改已经内置 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);

当它已经被初始化时

4

1 回答 1

0

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

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

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

于 2020-02-07T13:25:40.257 回答