google-maps-api-3 - 隐藏折线的正确方法？

Question

我有一个在 map 上显示折线的函数，这部分正在工作，现在我想实现一个隐藏折线的函数，但我找不到我的错误，提前致谢。

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

您只需要创建一次折线。将其放入全局 var 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>