La bonne façon de cacher une polyligne?

Question

J'ai une fonction qui montre une polyligne sur une carte, cette partie fonctionne, maintenant je veux implémenter une fonction qui cache la polyligne, mais je ne peux pas trouver mon erreur, merci d'avance.

function cargaMapaCYL(mapa, varControl){ 
    var limite = null; 
    limite = [ 
     new google.maps.LatLng(42.49956716,-7.019005501), 
     new google.maps.LatLng(42.49947126,-7.029286373), 
     new google.maps.LatLng(42.50904062,-7.049299123), 
     new google.maps.LatLng(42.50722622,-7.069103626), 
     new google.maps.LatLng(42.50452387,-7.000150672), 
     new google.maps.LatLng(42.49348015,-6.983058917), 
     new google.maps.LatLng(42.49843269,-6.971666546), 
     new google.maps.LatLng(42.51765791,-6.956909023), 
     new google.maps.LatLng(42.52010069,-6.927429186), 
     new google.maps.LatLng(42.50992238,-6.914231493), 
     new google.maps.LatLng(42.50096695,-6.879679821), 
     new google.maps.LatLng(42.48775868,-6.857775832), 
     new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5); 

    var contorno= new google.maps.Polyline({ 
     path: limite, 
     strokeColor: "#000000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 
    if(varControl==true){ 
     contorno.setMap(mapa); 
    } 
    if(varControl==false){ 
     contorno.setMap(null); 
    } 
} 

Answer 1

Chaque votre fonction est appelée, elle crée une nouvelle polyligne. Lequel il ajoute ou non à la carte.

Persumably, vous voulez être en mesure d'appeler la fonction une fois avec true pour ajouter la ligne, puis à nouveau avec false pour l'enlever. En ce moment, lorsque vous l'appelez une seconde fois, il crée une nouvelle ligne et ne l'ajoute pas à la carte. Il ne touche pas la ligne d'origine déjà ajoutée à la carte. Un moyen est aussi de garder la ligne dans une variable globale. Puis peut se référer au même objet exact entre les appels.

var contorno = null; 

function cargaMapaCYL(mapa, varControl){ 
    if (!contorno) { 
     var limite = [...], "#000000", 5); 

     contorno= new google.maps.Polyline({...}); 
    } 

    if(varControl){ 
     contorno.setMap(mapa); 
    } else { 
     contorno.setMap(null); 
    } 
} 

Answer 2

Vous n'avez besoin de créer la polyligne qu'une seule fois. Mettez-le dans un global var contorno = ... Ensuite, vous pouvez créer une fonction bascule en utilisant la méthode setVisible (boolean).

if(contorno.getVisible()){ 
     contorno.setVisible(false); 
    else{ 
     contorno.setVisible(true); 
    } 
// or 
contorno.getVisible() ? contorno.setVisible(false) : contorno.setVisible(true); 

Souffler est un exemple qui masque le chemin après 3 secondes.

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script> 
 
// This example creates a 2-pixel-wide red polyline showing the path of William 
 
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and 
 
// Brisbane, Australia. 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 3, 
 
    center: {lat: 0, lng: -180}, 
 
    mapTypeId: 'terrain' 
 
    }); 
 

 
    var flightPlanCoordinates = [ 
 
    {lat: 37.772, lng: -122.214}, 
 
    {lat: 21.291, lng: -157.821}, 
 
    {lat: -18.142, lng: 178.431}, 
 
    {lat: -27.467, lng: 153.027} 
 
    ]; 
 
    var flightPath = new google.maps.Polyline({ 
 
    path: flightPlanCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2 
 
    }); 
 

 
    flightPath.setMap(map); 
 
    
 
    setTimeout(function() { 
 
    \t alert('hide path'); 
 
    flightPath.setVisible(false); 
 
    }, 3000); 
 
} 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>