Правильный способ скрыть полилинию?

Question

У меня есть функция, которая показывает полилинию на карте, эта часть работает, теперь я хочу реализовать функцию, которая скрывает полилинию, но я не могу найти свою ошибку, спасибо заранее.

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

Вам нужно создать полилинию только один раз.Поместите его в глобальную переменную contorno = ... Затем вы можете создать функцию переключения, используя метод setVisible (boolean).

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

Blow - это пример, который скрывает путь через 3 секунды.

/* 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() {
  	alert('hide path');
    flightPath.setVisible(false);
  }, 3000);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 2

Каждая ваша функция вызывается, она создает новую ломаную линию. Который либо добавляет карту, либо нет.

Вероятно, вы захотите иметь возможность вызвать функцию один раз с true, чтобы добавить строку, затем снова с false, чтобы удалить ее. В тот момент, когда вы вызываете его во второй раз, он создает новую строку и не добавляет ее на карту. Это не касается исходной линии, уже добавленной на карту.

Один из способов - сохранить строку в глобальной переменной. Затем можно ссылаться на точно такой же объект между вызовами.

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