同じリンクのポリラインを削除する

Question

ポリラインGoogleマップapi v3に問題があります。

リンクをクリックするとポリラインが描画されますが、同じリンクでポリラインを削除または隠してしまいますか？

私のコード：

HTML

<a href="mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a> 

javascriptの

function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) { 

    var start = new google.maps.LatLng(ltOrigen, lgOrigen); 
    var end = new google.maps.LatLng(ltDestino, lgDestino); 

    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object 
    directionsDisplay.setMap(map); // map should be already initialized. 

    var request = { 
     origin : start, 
     destination : end, 
     travelMode : google.maps.TravelMode.DRIVING 
    }; 
    var directionsService = new google.maps.DirectionsService(); 
      //var bounds = new google.maps.LatLngBounds(); 

    directionsService.route(request, function(response, status) { 
     /*if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     }*/ 
     if (status == google.maps.DirectionsStatus.OK) { 
             var path = new google.maps.MVCArray(); 
             var poly = new google.maps.Polyline({ 
              map: map, 
              strokeColor: '#F3443C' 
             }); 
             for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) { 
              path.push(response.routes[0].overview_path[i]); 
             } 
             poly.setPath(path); 
             //map.fitBounds(bounds); 
            } 
    }); 
} 

Answer 1

あなたはグローバルスコープでポリラインへの参照を保持する必要があります。それはすでに作成されている場合は、あなたがしたい場合は、それが示されていない場合、リンクがクリックされたマップに再度追加することによって、それを切り替えることができます（マップから削除します。

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 
var poly; 
 
var ltOrigen = 40.7127837, 
 
    lgOrigen = -74.0059413, 
 
    ltDestino = 40.735657, 
 
    lgDestino = -74.1723667; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    });; 
 
} 
 

 
function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) { 
 
    if (poly && poly.setMap && poly.getMap && (poly.getMap() != null)) { 
 
    poly.setMap(null); 
 
    return; 
 
    } 
 
    var start = new google.maps.LatLng(ltOrigen, lgOrigen); 
 
    var end = new google.maps.LatLng(ltDestino, lgDestino); 
 

 
    var directionsDisplay = new google.maps.DirectionsRenderer(); // also, constructor can get "DirectionsRendererOptions" object 
 
    directionsDisplay.setMap(map); // map should be already initialized. 
 

 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    //var bounds = new google.maps.LatLngBounds(); 
 

 
    directionsService.route(request, function(response, status) { 
 
    /*if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    }*/ 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     var path = new google.maps.MVCArray(); 
 
     poly = new google.maps.Polyline({ 
 
     map: map, 
 
     strokeColor: '#F3443C' 
 
     }); 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) { 
 
     path.push(response.routes[0].overview_path[i]); 
 
     bounds.extend(response.routes[0].overview_path[i]); 
 
     } 
 
     poly.setPath(path); 
 
     map.fitBounds(bounds); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<a href="javascript:mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a> 
 
<div id="map_canvas"></div>