Bing 地图 v8 - 清除图层从地图视图中删除路线折线

Question

当我需要清除 directionsUpdated 上的地图图层设置新的行驶路线或通过拖放更改路线时，函数 map.layers.clear() 会删除路线。

有什么想法吗？

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key',
    center: new Microsoft.Maps.Location(47.606209, -122.332071),
    zoom: 12
});

addPushpins();

Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    // Set Route Mode to driving
    directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond', location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789) });
    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle', location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797) });
    directionsManager.addWaypoint(waypoint1);
    directionsManager.addWaypoint(waypoint2);
    // Set the element in which the itinerary will be rendered
    directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
    directionsManager.calculateDirections();

    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
});

function onUpdateDirections() {
    map.layers.clear();
    addPushpins();
}

function addPushpins() {
    // Generate an array of 10 random pushpins within current map bounds
    var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
    var layer = new Microsoft.Maps.Layer();
    layer.add(pushpins);
    map.layers.insert(layer);
}

Answer 1

这是设计使然。路线数据使用它自己的图层呈现。如果您清除地图上的所有图层，那么方向也会消失。对于您的数据，请像这样重用图层：

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key',
    center: new Microsoft.Maps.Location(47.606209, -122.332071),
    zoom: 12
});

var layer = new Microsoft.Maps.Layer();
map.layers.insert(layer);

addPushpins();

Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
    var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    // Set Route Mode to driving
    directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond', location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789) });
    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle', location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797) });
    directionsManager.addWaypoint(waypoint1);
    directionsManager.addWaypoint(waypoint2);
    // Set the element in which the itinerary will be rendered
    directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
    directionsManager.calculateDirections();

    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
});

function onUpdateDirections() {
    layer.clear();
    addPushpins();
}

function addPushpins() {
    // Generate an array of 10 random pushpins within current map bounds
    var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
    layer.add(pushpins);
}

Bing 地图 v8 - 清除图层从地图视图中删除路线折线

Bing Maps v8 - Clear layers removes route polyline from the map view

maps

bing

bing-maps