polylines

polylines

关注
发信
关注(28)粉丝(399)

将多个多段线添加到单个阵列

本文介绍了将多个多段线添加到单个阵列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是Maps API V3的新成员，但我无法找到将多条多段线放在一个数组中的方法，因此我可以使用按钮（一次全部）显示/隐藏它们。这是我的代码。



//设置点击事件侦听器：只需将地图设置为波哥大中心

  var bogota = new google.maps.LatLng（4.697316，-74.044805）; 
 var directionsDisplay; 
 var directionsService = new google.maps.DirectionsService（）;

// FUNCION INICIALIZE $ b $ 

  function initialize（）{
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; 
 
 //传入此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），
 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），
新的google.maps.LatLng（4.696480134933544，-74.04946461785585），
新google.maps.LatLng（4.687099216812973，-74.03546721674502），
新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



// SHOW / HIDE 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）; 
 
 
 $ b $ / code $ / pre 
 $ b 
 // CREATE BUTTON  p> 
 
 
 函数Controles（DivGeneral，mapa）{
 
 //设置控件边框的CSS。 
 var InfoUI = document.createElement（'div'）; 
 InfoUI.style.backgroundColor ='white'; 
 InfoUI.style.borderStyle ='solid'; 
 InfoUI.style.borderWidth ='1pt'; 
 InfoUI.style.borderColor ='#CCC'; 
 InfoUI.style.cursor ='指针'; 
 InfoUI.style.textAlign ='left'; 
 InfoUI.title ='Ver Ciclorutas'; 
 InfoUI.style.marginTop ='2px'; 
 DivGeneral.appendChild（InfoUI）; 
 
 //为控件内部设置CSS。 
 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> 
  
 
 
解决方案
我认为答案在于你已经定义了CRArray 。  
 
 
通过在initialize（）中定义CRArray，您已将数组的范围设置为该函数的内部。要访问其他函数中的CRArray，最简单的方法是在全局范围内定义它（在initialize（）之外移动var CRArray。） 
 
 
请尝试下面的代码： 
 
 
  var CRArray = new Array（）; 
 
函数initialize（）{
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; 
 
 //传入此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），
 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），
新的google.maps.LatLng（4.696480134933544，-74.04946461785585），
新google.maps.LatLng（4.687099216812973，-74.03546721674502），
新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）; 
 
} 
  
 
I´m new working on Maps API V3, but I can´t find a way to put multiple polylines inside one array, so I can make them show/hide with a button (all at once). This is my code.
// Setup the click event listener: simply set the map to center on 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
// SHOW/HIDE 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);
 }
  }
}

// CREATE BUTTON        
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>

 解决方案 
I think the answer lies in where you have defined CRArray. 
By defining CRArray inside of initialize(), you've set the scope of the array to be inside of that function. To access CRArray inside of other functions, the easiest way is to define it in the global scope (move var CRArray outside of initialize().)
Try the following code instead:
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);

}

                        
这篇关于将多个多段线添加到单个阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-26 06:54
Powered by LMLPHP ©2025 polylines 0.051234