Question

我正在使用Maps API V3，但是我找不到将多条折线放在一个数组中的方法，所以我可以用一个按钮显示/隐藏它们（一次性完成）。这是我的代码。

//设置click事件监听器：只需将地图设置为Bogota的中心

即可

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

// FUNCION INICIALIZE

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

//显示/隐藏POLYLINES

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>

Answer 1

我认为答案在于您定义了CRArray的位置。

通过在initialize（）中定义CRArray，您已将数组的范围设置为该函数内部。要在其他函数内部访问CRArray，最简单的方法是在全局范围内定义它（在initialize（）之外移动var CRArray。）

请尝试使用以下代码：

var CRArray = new Array();

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

}

将多条折线添加到单个阵列

1 个答案: