如何使用mapquest api, L.mapquest.directions().route() 添加多个路由？

Question

我需要用不同的 routeRibbon 颜色绘制多条路线，其中一条路线包含 waypoints。我目前有这段代码，它工作正常，但每次绘制路线时，地图都会刷新并闪烁 UI。处理这种情况的最佳方法是什么。提前致谢

for (let i = 1; i < shipment.length; i++) {
    const directions = L.mapquest.directions();
    this.setRouteLayer(directions, routeColor);
    directions.route({
      start: [shipment[i - 1].latitude, shipment[i - 1].longitude],
      end: [shipment[i].latitude, shipment[i].longitude],
      waypoints: waypointsArr,
    });
  }

Answer 1

抱歉耽搁了，看看我为你做的这个例子，我认为它可以帮助你，

<html>
  <head>
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

    <script type="text/javascript">
      window.onload = function() {
        L.mapquest.key = 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24';
        var coords = [
          [40.768469, -73.965561],
          [40.776224, -73.962194],
          [40.783750, -73.977886] 
        ];
        var getStyle = function (tA, cA, tB, cB) {
          return {
            startMarker: {
              icon: 'circle',
              iconOptions: {
                size: 'sm',
                primaryColor: cA,
                secondaryColor: cA,
                symbol: tA
              },
              title: 'Drag to change location'
            },
            endMarker: {
              icon: 'circle',
              iconOptions: {
                size: 'sm',
                primaryColor: cB,
                secondaryColor: cB,
                symbol: tB
              },
              title: 'Drag to change location'
            },
            routeRibbon: {
              color: "#2aa6ce",
              opacity: 1.0,
              showTraffic: false
            }
          };
        }
        var styles = [
          getStyle('A', '#aa0000', 'B', '#0000aa'),
          getStyle('B', '#0000aa', 'C', '#00aa00')
        ];
        var layers = [];
        const directions = L.mapquest.directions();
        for (let i = 1; i < coords.length; i++) {
          directions.route({
            start: coords[i-1],
            end: coords[i]
          }, createMap);
        }
        // create map
        function createMap(err, response) {
          if (!response) {
            return;
          }
          const l = L.mapquest.directionsLayer({
            ...styles[layers.length],
            directionsResponse: response
          });
          layers.push(l);
          if (layers.length === coords.length - 1) {
            var map = L.mapquest.map('map', {
              center: [40.776224, -73.962194],
              layers: L.mapquest.tileLayer('map'),
              zoom: 12
            });
            for(let i = 0; i < layers.length; i++) {
              map.addLayer(layers[i]);
            }
          }
        }
      }
    </script>
  </head>

  <body style="border: 0; margin: 0;">
    <div id="map" style="width: 100%; height: 530px;"></div>
  </body>
</html>

如何使用mapquest api, L.mapquest.directions().route() 添加多个路由？

How to add multiple routes using mapquest api, L.mapquest.directions().route()?

javascript

maps

web-frontend

mapquest

angular