Google지도에서 길 찾기 제거하기

Question

Google 지역 정보 API를 사용하여지도에 장소 목록을 표시하고 있습니다. 사용자는 각 장소에 개별적으로 길 찾기를 할 수 있습니다. 길 찾기가지도에 잘 나타나고 모든 것이 작동하지만 다른 장소로 길을 찾을 때마다 이전 길과 함께지도에 길 찾기가 추가됩니다. 새 장소를 선택하면지도의 기존 길 찾기를 덮어 쓰고 싶습니다. 따라서 한 번에 한 가지 방향 만 표시됩니다. 이상적으로는지도에 표시된 경로 하나와 길 찾기 목록 하나만 표시하는 것이 좋습니다.

나는 새로운 사람을 설정하기 전에 모든 방향을 취소 한 다음 추가 시도했다 :

directionDisplay = new google.maps.DirectionsRenderer(); 
directionDisplay.suppressMarkers = true; 
directionDisplay.setMap(null); 

여기 제안으로 : Google Maps Version 3 Remove directions markers을하지만 아무 소용.

문서를 검색하고 검색하는 데 아무리 많은 도움이되지는 않습니다.

도움을 주시면 감사하겠습니다.

ja

Answer 1

새지도를 렌더링하기 전에 길 찾기를 지울 필요가 없습니다.

directionDisplay에 1 개의 전역 변수를 사용하면 setDirections()를 호출하여 새 방향을 렌더링하는 즉시 현재 방향이 제거됩니다.

Answer 2

// in the global scope 
var directions = []; 

document.getElementById('submit').addEventListener('click', function() { 
if (directions && directions.length > 0) { 
    for (var i=0; i<directions.length; i++) 
    directions[i].setMap(null); 
    } 
    directions = []; 
    calculateAndDisplayRoute(directionsService, markerArray, stepDisplay, map, true, "SUBWAY"); 
}); 


function calculateAndDisplayRoute(directionsService,markerArray, stepDisplay, map, is_transit, transit_mode) { 
      //var selectedMode = "TRANSIT"; 
      // First, remove any existing markers from the map. 
      for (var i = 0; i < markerArray.length; i++) { 
       markerArray[i].setMap(null); 
      } 

      if (is_transit == true){ 
       var request = { 
        origin: {lat: start_lat, lng: start_lon}, 
        destination: {lat: end_lat, lng: end_lon}, 
        travelMode: google.maps.TravelMode.TRANSIT, 
        transitOptions: { 
         modes: [google.maps.TransitMode[transit_mode]], 
        }, 
        provideRouteAlternatives: true 
       }; 
      }else{ 
       var request = { 
        origin: {lat: start_lat, lng: start_lon}, 
        destination: {lat: end_lat, lng: end_lon}, 
        travelMode: google.maps.TravelMode[transit_mode], 
        provideRouteAlternatives: true 
       }; 
      } 


      // Retrieve the start and end locations and create a DirectionsRequest using 

      directionsService.route(request, function(response, status) { 
       // Route the directions and pass the response to a function to create 
       console.log(response) 
       console.log(response.routes[0]) 

       var polyline = new google.maps.Polyline({ 
        strokeColor: '#6855C9', 
        strokeOpacity: 1, 
        strokeWeight: 7 
       }); 

       if (status == google.maps.DirectionsStatus.OK) { 
        for (var i = 0, len = response.routes.length; i < len; i++) { 

         directions.push(new google.maps.DirectionsRenderer({ 
          map: map, 
          directions: response, 
          routeIndex: i , 
          suppressMarkers: true 
         })); 

         //showSteps(response, markerArray, stepDisplay, map); 
        } 
       } else { 
        window.alert('Directions request failed due to ' + status); 
       } 



      }); 
     }