2

背景

我目前正在从事一个项目，当从下拉列表或类似输入中选择位置时，会在相应坐标处将标记插入到地图上。它还支持选定点之间的导航。这些点在地图上可能有标记，也可能没有，这取决于用户在创建导航之前选择的内容。在这个项目中，我使用Leaflet进行地图显示，使用Leaflet Routing Machine在地图上进行点对点导航。

问题

我遇到的问题是，当我尝试在点之间创建导航时，我无法指定要在哪些航点上放置标记。这是一个问题，因为这会导致给定位置的标记重叠。那么，有没有办法在使用 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');
}

提前感谢任何有任何想法的人！

4

0 回答 0