Question

我使用 MapQuest Leaflet Api 绘制一个包含多个停靠点的路线（自定义标记）。一切都快完成了。我正在获得多个标记和多边形线的路径。

我有两个问题

如何在点击上绘制优化路线用于路由优化的按钮代码就是这样的

dir = MQ.routing.directions();
           dir.optimizedRoute({
                locations: [
                   '33.703507, 73.053702',
                      '33.714328, 73.050625',
                      '33.730497, 73.077898',
                      '33.732863, 73.088078'
                ]
            });

如何获得总路线和行车时间的距离？

我的代码如下：

<script>
    window.onload = function () {
                var map,
                    dir;
                var custom_icon,
                    marker;
                map = L.map('map', {
                    layers: MQ.mapLayer(),
                    center: [40.045049, -105.961737],
                    zoom: 7
                });

                dir = MQ.routing.directions();
                dir.route({
                    locations: [
                      '33.703507, 73.053702',
                      '33.714328, 73.050625',
                      '33.730497, 73.077898',
                      '33.732863, 73.088078'
                    ],
                    options: { avoids: ['toll road'] }
                });
    CustomRouteLayer = MQ.Routing.RouteLayer.extend({
                        createStopMarker: function (location, stopNumber) {


                            custom_icon = L.divIcon({
                                iconSize: [26, 36],
                                popupAnchor: [0, -18],
                                html: '<span class="notification">' + stopNumber + '</span>'
                            });
                            marker = L.marker(location.latLng, { icon: custom_icon }).bindPopup(location.adminArea5 + ' ' + location.adminArea3).openPopup().addTo(map);

                            marker.on('click', onMarkerClick);

                            return marker;
                        }
                    });
     map.addLayer(new CustomRouteLayer({
                    directions: dir,
                    fitBounds: true,
                    draggable: false,
                    ribbonOptions: {
                        draggable: false,
                        ribbonDisplay: { color: '#CC0000', opacity: 0.3 },
                        widths: [15, 15, 15, 15, 14, 13, 12, 12, 12, 11, 11, 11, 11, 12, 13, 14, 15]
                    }
                }));
     }
    </script>
    <body style='border:0; margin: 0'>
        <div id='map' style='position: absolute; top: 0; bottom: 0; width: 100%;'></div>
    </body>

请帮忙。谢谢:)）

Answer 1

该按钮将调用一个带有MQ.routing.directions.optimizedRoute（）代码的函数。

function optimize() {
  dir = MQ.routing.directions();

  dir.optimizedRoute({
    locations: [
      'syracuse ny',
      'springfield ma',
      'ithaca ny',
      'hartford ct'
    ]
  });

  map.addLayer(MQ.routing.routeLayer({
    directions: dir,
    fitBounds: true
  }));
}

要获得里程，请使用成功事件来获得整个方向的响应。

dir = MQ.routing.directions()
  .on('success', function(data) {
     console.log(data.route.distance);
  });

MapQuest Leaflet Api - 获取具有时间和距离的优化路径

1 个答案: