顯示隱藏多段線谷歌地圖

Question

頁面加載地圖上的所有多段線自動加載。 我需要隱藏它，當我點擊chekcbox時，它會顯示在地圖上。我該怎麼做？ 多義線有類別..就像人造絲..我把它叫做複選框類別人造絲..

P.S.對不起，我的英語 是我的代碼：

function getline() { 
     var mpenc = new google.maps.InfoWindow(); 

function pinfo(poly, html) { 


     google.maps.event.addListener(poly,"mouseover",function(){ poly.setOptions({ 
strokeColor:'#FFFFFF', strokeOpacity: .8});}); 

     google.maps.event.addListener(poly,"mouseout",function(){ 
poly.setOptions({strokeColor:colorr});}); 


    google.maps.event.addListener(poly,'click', function(event) { 
    mpenc.setContent(html); 
    mpenc.setPosition(event.latLng); 
    mpenc.open(map); 
    }); 

}  
alert('Loading Lines.. Please wait 10 sec.'); 
downloadUrl("all.php", function(doc) { 
     alert('Lines loaded..'); 

     var g = google.maps; 
     var xmlDoc = xmlParse(doc);   bounds = new google.maps.LatLngBounds(); 
     // ========= Now process the polylines =========== 
     var lines = xmlDoc.documentElement.getElementsByTagName("line"); 

     // read each line 
     for (var a = 0; a < lines.length; a++) { 
     // get any line attributes 
     var colour = lines[a].getAttribute("colour"); 
     var width = parseFloat(lines[a].getAttribute("width")); 
     var diameter = lines[a].getAttribute("diameter"); 
     var project = lines[a].getAttribute("projectid");  var type = lines[a].getAttribute("type"); 
     var contract = lines[a].getAttribute("contract");    var cr = lines[a].getAttribute("contractor"); if (cr) {cr1 = " " + cr + " ";} else { cr1 = "None";} 
     var comp = lines[a].getAttribute("complated"); 
     var id = lines[a].getAttribute("id_line"); 
     var html = "<b>Contractor:</b> " + cr1 + " </a> <br/> <b> Contract: </b>" + contract + " <br/><b>Line Segment:</b> " + id + " <br/><b>Project: </b>" + project +"<br/> <b>Diameter: </b>" + diameter + " <br/> <b>Completed: </b>" + comp + "% <hr><br/><a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('cdatal.php?id="+ id +"','cdatal','height=300, width=460,scrollbars=no')\">Change completed</a> <a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('dedit.php?id="+ id +"','cdata','height=300, width=350,scrollbars=no')\">Design data</a>" ; 
     // read each point on that line 
     var points = lines[a].getElementsByTagName("point"); 
     var pts = []; 
     var length = 0; 
     var point = null; 
     for (var i = 0; i < points.length; i++) { 
      pts[i] = new g.LatLng(parseFloat(points[i].getAttribute("lng")), 
           parseFloat(points[i].getAttribute("lat"))); 
      if (i > 0) { 
      length += pts[i-1].distanceFrom(pts[i]); 
      if (isNaN(length)) { alert("["+i+"] length="+length+" segment="+pts[i-1].distanceFrom(pts[i])) }; 
      } 
      bounds.extend(pts[i]); 
      point = pts[parseInt(i/2)]; 
     } 
     // length *= 0.000621371192; // miles/meter 


    if (comp < 1) { 
colorr = '#FA0505' } 

if (comp > 0 && comp < 25) { 
colorr = '#FFA640' } 

if (comp > 24 && comp < 50) { 
colorr = '#FFFD91' } 

if (comp > 49 && comp < 75) { 
colorr = '#E8E400' } 

if (comp > 74 && comp < 100) { 
colorr = '#BFFFAD' } 

if (comp == 100) { 
colorr = '#0F8500' } 
    if(type == 'dl') {en = '1'}  if(type == 'ml') {en = '3'}  if(type == 'tl') {en = '5'} 

     var poly = new g.Polyline({ 
          map:map, 
          path:pts, 
          strokeColor:colorr, 
          strokeWeight:en, 
          clickable: true 
          }); 



    pinfo(poly,html); 



} 
     map.fitBounds(bounds); 

    }); 


} 



<li><input type="checkbox" id="value1" value="wsn/qabala.php" onclick="boxclick(this.value,'qabala','value1')" /> Qabala</li> 
    <li><input type="checkbox" id="value2" value="wsn/ismailli.php" onclick="boxclick(this.value,'ismailli','value2')" /> Ismayilli</li> 
    <li><input type="checkbox" id="value3" value="wsn/agshu.php" onclick="boxclick(this.value,'value3')" /> Aghsu</li> .... 

和XML數據：

http://nn-gis.com/map/all.php 

Answer 1

你的意思是這樣的？

http://jsfiddle.net/NCZYW/9/

$(function() { 

    var div = $('#categories'); 

    var map = new google.maps.Map($('#map').get(0), { 
     center: new google.maps.LatLng(0, -180), 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var categories = { 
     rayon: [ 
      { 
       coordinates: [ 
        [37.772323, -122.214897], 
        [21.291982, -157.821856], 
        [-18.142599, 178.431], 
        [-27.46758, 153.027892] 
       ], 
       color: '#FF0000' 
      } 
     ] 
    }; 

    $.each(categories, function(name) { 

     var paths = [];new google.maps.LatLng 

     $.each(this, function(i) { 

      var path = []; 

      $.each(this.coordinates, function(i) { 

       path.push(new google.maps.LatLng(this[0], this[1])); 

      }); 

      paths.push(new google.maps.Polyline({ 
       path: path, 
       strokeColor: this.color, 
       strokeOpacity: 1.0, 
       strokeWeight: 2, 
       visible: false, 
       map: map 
      })); 

     }); 

     categories[name] = paths; 

     div.append('<label><input type="checkbox" value="' + name + '"/> ' + name + '</label>'); 

    }); 

    div.on('change', 'input', function(event) { 

     var checked = this.checked; 

     $.each(categories[this.value], function(i) { 

      this.setVisible(checked); 

     }); 

    }); 

}); 

的關鍵是組的折線。