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

时间:2017-07-14 18:21:53

标签: maps bing bing-maps

当我需要在 directionsUpdated 上清除地图图层时,设置新的行车路线或通过拖拽和方式更改路线drop,函数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);
}

1 个答案:

答案 0 :(得分:0)

这是设计的。路线数据使用它自己的层来渲染。如果清除地图上的所有图层,则方向也会消失。对于您的数据,请重复使用图层,如下所示:

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