Маршрутизатор листовки - Управление маршрутом: как добавить прослушиватель щелчка для каждой инструкции в таблице маршрутов? - PullRequest
Новая
       21

Маршрутизатор листовки - Управление маршрутом: как добавить прослушиватель щелчка для каждой инструкции в таблице маршрутов?

0 голосов
/ 06 февраля 2020

в настоящее время действие по умолчанию при щелчке по части маршрута состоит в том, что он увеличивает эту координату на карте.

В настоящее время я пытаюсь добавить в речь текст, который будет произносить инструкции для этого конкретного part.

но как мне изменить прослушиватель щелчков, который уже встроен 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);

, когда она уже была инициализирована

1 Ответ

0 голосов
/ 07 февраля 2020

В коде, который вы вставили, вы можете видеть, что Leaflet Routing Machine использует нечто, называемое ItineraryBuilder, которое отвечает за создание элементов DOM для маршрута.

Вы можете предоставить свой собственный ItineraryBuilder, переопределяя конструктор по умолчанию, при создании элемента управления. С вашей собственной пользовательской реализацией вы должны иметь возможность переопределить метод createStep, чтобы он добавлял любого прослушивателя, который вам нужен.

Одной из возможных проблем является то, что я вижу, что стандартный обработчик событий click вызывает stopPropagation на событии, что, вероятно, означает, что слушатель, которого вы подключите выше в иерархии DOM, не увидит событие click. Если это так, вам нужен способ предотвратить вызов _addRowListeners, которого в моей памяти в настоящее время не существует.

...