时间戳

首页 > 解决方案 > 如何将 MapQuest RouteLayer 添加到传单图层

javascript - 如何将 MapQuest RouteLayer 添加到传单图层

问题描述

我想在我的传单应用程序中实现允许在两个选定点之间查找路线的功能。要查找路线，我想使用这个库：mapquest 我扩展了标准传单地图类，如下所示：

export class Map {
constructor(elementId, centerView, zoom ) {
        this.layers = [];
        this.map = this.init(elementId,centerView,zoom);
        this.icons = {};
    }
        init(elementId, centerView, zoom) {
        //console.log('Map::init('+elementId+', ['+centerView+'], '+zoom+')');
        delete L.Icon.Default.prototype._getIconUrl;

        const markerIcon = require('leaflet/dist/images/marker-icon.png');
        const markerIcon2x = require('leaflet/dist/images/marker-icon-2x.png');
        const markerShadow = require('leaflet/dist/images/marker-shadow.png');

        L.Icon.Default.mergeOptions({
            iconRetinaUrl: markerIcon2x.default,
            iconUrl: markerIcon.default,
            shadowUrl: markerShadow.default,
        });

        var map = L.map(elementId, {
            center: [centerView[0], centerView[1]],
            zoom: zoom
        });        

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org         /copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        return map;
    }
}

我写了一些函数来帮助我使用地图（添加点、标记等）。这就是我初始化扩展地图对象的方式：

let centerView = [35.791188, -78.636755];
let zoom = 9;
var map = new Map('map', centerView, zoom);

我找到了如何生成路线mapquest-routing 的代码。我正在通过单击工作正常的地图来获取坐标。我生成路由的函数如下所示：

 function runDirection(start, end) 
    {
        var dir = MQ.routing.directions();

        dir.route({
            locations: [
                start,
                end
            ]
        });
        
        map.map.addLayer(MQ.routing.routeLayer({
            directions: dir,
            fitBounds: true

})); }

但我收到错误：

未捕获的错误：提供的对象不是图层。

这意味着 MQ.routing.routeLayer()，不会返回我 leyer 对象。所以问题是，如何将路线添加到标准传单地图？

标签： javascriptwebleaflet

解决方案

您正在使用已弃用的库。在https://developer.mapquest.com/documentation/leaflet-plugins/geocoding/网页上有一个大红字的弃用警告，我引用：

我们建议改用MapQuest.js。

Leaflet 的 mapquest 插件网页中的文档列出了 Leaflet 0.7.7（于 2013 年发布）的兼容性。Leaflet 使用语义版本控制，这意味着使用 0.x 的东西不能保证使用 1.x。可以安全地假设有问题的 Leaflet 插件仅适用于 Leaflet 0.7.x 及更早版本，不适用于 Leaflet 1.x。

推荐阅读