Как я могу выбрать, какие путевые точки имеют прикрепленные маркеры?

Фон

В настоящее время я работаю над проектом, в котором при выборе местоположения из раскрывающегося списка или аналогичного ввода на карту вставляется маркер с соответствующими координатами. Он также поддерживает навигацию между выбранными точками. Эти точки могут иметь маркеры на карте или не иметь, в зависимости от того, что пользователь выбрал до создания навигации. В этом проекте я использую Leaflet для отображения карты и Leaflet Routing Machine для двухточечной навигации по карте.

Вопрос

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь создать навигацию между точками, я не могу указать, на каких путевых точках я хочу иметь маркеры. Это проблема, потому что это приведет к перекрытию маркеров в данном месте. Итак, есть ли способ создавать маркеры только на выбранных путевых точках при создании маршрута с использованием машины маршрутизации листовок?

пример

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

Вот (в настоящее время недействительный) Javascript, который показывает, как я добавляю в очки.

function getDirections(waypoints, mode) {

    if (typeof mode === 'undefined') {
        mode = 'driving'
    }

    routingControl.getRouter().options.profile = 'mapbox/' + mode;
    routingControl.setWaypoints(waypoints);

    // I'm also trying to figure out how to find if the marker is sitting in the same spot as another, 
    // but that's another question for another time.
    if (MARKERS EXIST AT EACH POINT) {
        routingControl.options.createMarker = function () {
            return null;
        }

    } else if (MARKERS EXIST AT SOME POINTS) {
        // The resolution to the issue that I'm trying to solve would sit here

    } else {
        routingControl.options.createMarker = function() {
            return L.marker(wp.latLng);
        }
    }

    var routeBlock = routingControl.onAdd(map);
    $('#directions-display-pane')
        .html(routeBlock)
        .append('<div class="inline-form">' +
                    '<button id="directions-back-button" class="expanded">Back</button>' +
                    '<div class="icon create-link link" tooltip="Create link"><i class="fa fa-link" aria-hidden="true"></i></div>' +
                '</div>')
        .removeClass('hidden');
}

Заранее спасибо всем, у кого есть идеи!

0 ответов

Другие вопросы по тегам