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

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);

我已经尝试了一些不值得展示的东西，完全没有。任何建议都会很棒，谢谢

Answer 1

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

在createMarker供选择的功能L.Routing.control可以使用，如：

// 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);

演示- 在隐身窗口中打开它，因为 API 有请求限制。

您应该会看到如下内容：

更新：要动态更改路线，您必须这样做：

将您的路由控制实例存储到一个变量中： 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

然后刷新路由图：

control.route();