删除谷歌地图上呈现的方向路线 [英] Remove rendered direction routes on google map

问题描述

我尝试在谷歌地图上呈现方向路线，我的问题是，当我尝试获取另一个方向路线以前呈现的路线不清晰。我想知道我是如何在地图上重置呈现的路线。

这里是我的代码。

 函数方向（dest，lat，lng）{
 
 $（'＃direction'）。slideUp（）; 
 $（'＃results'）。slideDown（）; 
 $（'＃dest-direction'）。val（dest）; 
 
 $ b $（'＃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 ==英里）{
 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>< / tr>< / table>'）; 
} 
}）; td>找不到方向，请再试一次。 
 
 $（'＃direction-form'）。nextAll（）。remove（）; 
返回false; 
 
}）; 
 
 
  

解决方案

与Dr.Molle。

然而，有一件事对于许多重叠（比如标记，比如infowindows，...）是有用的：将对象存储在一个数组中;
（如果需要的话），将该数组保留在全局范围内;
，那么你可以很容易地将它们从地图上移除。

  var renderObjects = []; 
 
函数clearRenderObjects（）{
 for（var i in renderObjects）{
 renderObjects [i] .setMap（null）; 
 
 
 $ b $（'＃direction-form'）。submit（function（）{
 // clear previous 
 clearRenderObjects（）; 
 ... 
 var directionsRenderer = new google.maps.DirectionsRenderer（）; 
 directionsRenderer.setMap（map）; 
 //添加到数组
 renderObjects。推（directionsRenderer）; 
 ... 
}）; 
  

I try to render direction route on google map and my issue was, when I am try to get another direction route previously rendered route not clear. I want to know how I reset rendered route on the map.

Here my code.

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;

});

}

解决方案

I agree with Dr.Molle .

Still, One thing that can be useful for many overlays (like markers, like infowindows, ...): Store the objects in an array; if needed, keep that array on the global scope; then you can easily remove them from the map.

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

这篇关于删除谷歌地图上呈现的方向路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！