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

问题描述：

我是一个在地图上显示多段线的函数，这部分工作正常，现在我想实现一个隐藏多段线的函数，但是我没有发现我的错误，因为提前感谢。隐藏多段线的正确方法是什么？

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

答

每次你的函数被调用，它会创建一个新的折线。然后它或者添加到地图中。

想必您可以使用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); 
    } 
}

答

您只需要创建一次折线。将其放入全局变量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() { 
 
    \t alert('hide path'); 
 
    flightPath.setVisible(false); 
 
    }, 3000); 
 
} 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

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

相关推荐