Question

嗨，我正在尝试使用传单添加自定义标记，并使用Routing.control绘制路线。我需要向标记添加变量，因为我需要不时更新标记位置之一。我将永远只有3个标记或路标，一个起点，一个第二和第三个。我可能只需要移动开始标记。

添加路线，绘制路线并添加默认标记的代码是

var route = L.Routing.control({
     waypoints: [
    L.latLng(my_lat, my_lng),
    L.latLng(job_p_lat, job_p_lng),
    L.latLng(job_d_lat, job_d_lng)
 ],show: false, units: 'imperial',
 router: L.Routing.mapbox('API KEY HERE')
}).addTo(map);

我尝试了q件事，没有什么值得一提的，完全没有做。任何建议都很好，谢谢

Answer 1

如果您查看此issue，将会发现有关不同标记图标的问题已经得到解答。

createMarker的{{1}}选项功能可以按以下方式使用：

L.Routing.control

Demo-由于该API的请求限制，请在隐身窗口中将其打开。

您应该看到以下内容：

更新：要动态更改路线，您必须执行以下操作：

将路由控制实例存储到变量：// source: https://github.com/pointhi/leaflet-color-markers var greenIcon = new L.Icon({ iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }); L.Routing.control({ waypoints: [ L.latLng(57.74, 11.94), // startmarker L.latLng(57.6792, 11.949) // endmarker ], createMarker: function(i, wp, nWps) { if (i === 0 || i === nWps - 1) { // here change the starting and ending icons return L.marker(wp.latLng, { icon: greenIcon // here pass the custom marker icon instance }); } else { // here change all the others return L.marker(wp.latLng, { icon: yourOtherCustomIconInstance }); } } }).addTo(map);

然后像这样更改标记位置：

var control = L.Routing.control({...})

，然后刷新路线图：

// this is the starting marker latitude
control.getRouter().options.waypoints[0].lat = L.latLng(59.74, 11.94);

// similarly for longitude and for ending marker to change the position dynamically

Answer 2

createMarker: function(i, waypoints, n) {
                    var startIcon = L.icon({
                        iconUrl: '/maps/green.png',
                        iconSize: [30, 48]
                    });
                    var sampahIcon = L.icon({
                        iconUrl: '/maps/yellow.png',
                        iconSize: [30, 48]
                    });
                    var destinationIcon = L.icon({
                        iconUrl: '/maps/red.png',
                        iconSize: [30, 48]
                    });
                    if (i == 0) {
                        marker_icon = startIcon
                    } else if (i > 0 && i < n - 1) {
                        marker_icon = sampahIcon
                    } else if (i == n - 1) {
                        marker_icon = destinationIcon
                    }
                    var marker = L.marker(waypoints.latLng, {
                        draggable: false,
                        bounceOnAdd: false,
                        bounceOnAddOptions: {
                            duration: 1000,
                            height: 800,
                            function() {
                                (bindPopup(myPopup).openOn(mymap))
                            }
                        },
                        icon: marker_icon
                    }).bindPopup('<h4>' + mylocs[i].nama_tps + '</h4><br>' +
                        mylocs[i].mylat + '<br>' + mylocs[i].mylong)
                    return marker
                }

路由控件名称并添加自定义标记

2 个答案: