0

私は Maps API V3 に取り組んでいますが、複数のポリラインを 1 つの配列内に配置する方法が見つからないため、ボタンで (一度に) 表示/非表示にすることができます。これは私のコードです。

// クリック イベント リスナーをセットアップします。ボゴタを中心にマップを設定するだけです。

var bogota = new google.maps.LatLng(4.697316, -74.044805);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

// 関数の初期化

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // passing in this DIV.
        var botonesDiv = document.createElement('div');
        var espacioControles = new Controles(botonesDiv, map);
                botonesDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(botonesDiv);   

    // Ingresamos las lineas de la CICLORUTAS
    // Son de color rojo
          var ColorViaCR = "#FF0000";
          var OpacidadCR = 1.0;
          var GrosorCR = 2;
          var CRArray = []; 


          var CiclorutasCoordinates116 = [
            new google.maps.LatLng(4.698555, -74.049835),
            new google.maps.LatLng(4.698437, -74.049004),
            new google.maps.LatLng(4.696328, -74.043339)
          ];
          var Cicloruta116 = new google.maps.Polyline({
            path: CiclorutasCoordinates116,
            strokeColor: ColorViaCR,
            strokeOpacity: OpacidadCR,
            strokeWeight: GrosorCR
          });
          CRArray.push(Cicloruta116);

          var CiclorutasCoordinates112 = [
            new google.maps.LatLng(4.696723396389598, -74.05013248790056),
            new google.maps.LatLng(4.696632507503862, -74.04982671607286),
            new google.maps.LatLng(4.696480134933544, -74.04946461785585),
            new google.maps.LatLng(4.687099216812973, -74.03546721674502),
            new google.maps.LatLng(4.687072484420475, -74.03525800444186)
          ];
          var Cicloruta112 = new google.maps.Polyline({
            path: CiclorutasCoordinates112,
            strokeColor: ColorViaCR,
            strokeOpacity: OpacidadCR,
            strokeWeight: GrosorCR
          });
          CRArray.push(Cicloruta112);

             directionsDisplay.setMap(map);

} 

// FIN DE INITIALIZE

// ポリラインを表示/非表示

function showCR() {
  for (var i=0; i< CRArray.length; i++) {
    if(CRArray[i].getMap(map)) { 
    CRArray[i].setMap(null); 
 } else { 
    CRArray[i].setMap(map);
 } 
  }
}

// ボタンを作成

function Controles(DivGeneral, mapa) {

    // Set CSS for the control border.
    var InfoUI = document.createElement('div');
    InfoUI.style.backgroundColor = 'white';
    InfoUI.style.borderStyle = 'solid';
    InfoUI.style.borderWidth = '1pt';
    InfoUI.style.borderColor = '#CCC';
    InfoUI.style.cursor = 'pointer';
    InfoUI.style.textAlign = 'left';
    InfoUI.title = 'Ver Ciclorutas';
    InfoUI.style.marginTop = '2px';
    DivGeneral.appendChild(InfoUI);

    // Set CSS for the control interior.
    var InfoText = document.createElement('div');
    InfoText.style.fontFamily = 'Arial,sans-serif';
    InfoText.style.color = '#000';
    InfoText.style.fontSize = '12px';
    InfoText.style.paddingLeft = '8px';
    InfoText.style.paddingRight = '8px';
    InfoText.style.paddingTop = '12px';
    InfoText.style.paddingBottom = '12px';
    InfoText.innerHTML = '<strong>Ver Ciclorutas</strong>';
    InfoUI.appendChild(InfoText);

    google.maps.event.addDomListener(InfoUI, 'click', function() {
          showCR();
     });

}     

google.maps.event.addDomListener(window, 'load', initialize);

</script>
4

1 に答える 1