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

您只需要创建一次折线。把它放到一个全局var contorno = ...然后你可以使用setVisible（boolean）方法创建一个toggle函数。

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

隐藏折线的正确方法是什么？

2 个答案: