Question

我尝试在谷歌地图上渲染方向路线，我的问题是，当我试图获得另一个方向路线时，先前渲染的路线不清楚。我想知道如何在地图上重置渲染路线。

这是我的代码。

function direction(dest, lat, lng) {

$('#direction').slideUp();
$('#results').slideDown();
$('#dest-direction').val(dest);


$('#direction-form').submit(function () {

    var ori = $('#origin-direction').val();

    map.setZoom(7);
    var currentLatLng = new google.maps.LatLng(lat, lng);
    map.setCenter(currentLatLng);

    var directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);
    directionsRenderer.setPanel(document.getElementById('direction'));

    var directionsService = new google.maps.DirectionsService();

    /////////////////////
    default_unit_system = google.maps.UnitSystem.METRIC;
    if (current_unit == "km") {
        default_unit_system = google.maps.UnitSystem.METRIC;
    } else if (current_unit == "miles") {
        default_unit_system = google.maps.UnitSystem.IMPERIAL;
    }
    /////////////////////

    var request = {
        origin: ori,
        destination: lat+','+lng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: default_unit_system
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsRenderer.setDirections(response);
        } else {
            //alert('Error: ' + status);
            $('#direction').append('<table width="100%"><tr><td>Direction not found. Please try again.</td></tr></table>');
        }
    });

    $('#direction-form').nextAll().remove();
    return false;

});

}

Answer 1

对所有请求使用相同的DirectionsRenderer实例（目前您在每个请求上创建一个新实例）

Answer 2

我同意Dr.Molle。

仍然，有一件事对许多叠加有用（比如标记，如infowindows，......）：将对象存储在数组中; 如果需要，将该数组保留在全局范围内; 然后你可以轻松地将它们从地图中删除。

var renderObjects = [];

function clearRenderObjects() {
  for(var i in renderObjects) {
    renderObjects[i].setMap(null);
  }
}

$('#direction-form').submit(function () {
  // clear previous
  clearRenderObjects();
  ...
  var directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);
  // add to the array
  renderObjects.push(directionsRenderer);
  ...
});

在谷歌地图上删除渲染的方向路线

2 个答案: