折線隱藏不起作用

Question

通過此代碼我可以顯示和隱藏標記..此代碼不適用於多段線。 當頁面加載所有行自動加載..任何人都可以建議如何在googlemap中切換多段線？

謝謝。

P.S.對不起，我的英語

var myCoordsLenght = 6; 
      var gmarkers = []; 


       function show(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
     if (!gmarkers[i].getMap()) gmarkers[i].setMap(map); 
      gmarkers[i].setVisible(true); 
      } 
     } 
     // == check the checkbox == 
     document.getElementById(category+"box").checked = true; 
     } 



     function hide(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(false); 
      } 
     } 
     document.getElementById(category+"box").checked = false; 
     infowindow.close(); 
     } 

     function boxwclick(box,category) { 
     if (box.checked) { 
      show(category); 
     } else { 
      hide(category); 
     } 

     } 

    function load() { 
    var myOptions = { 
     zoom: 7, 
     center: new google.maps.LatLng(40.0000, 48.0000), 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
    }, 
mapTypeId: google.maps.MapTypeId.HYBRID, 
    } 


    map = new google.maps.Map(document.getElementById("map"), myOptions); 


     var infoWindow = new google.maps.InfoWindow; 


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 category = lines[a].getAttribute("rayon"); 
     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 marker = new g.Polyline({ 
          map:map, 
          path:pts, 
          strokeColor:colorr, 
          strokeWeight:en, 
          clickable: true 
          }); 




     marker.mycategory = category;         
     marker.myname = name; 
     gmarkers.push(marker); 

     bindInfoWindow(marker, map, infoWindow, html); 

} 
     map.fitBounds(bounds); 

    }); 

function bindInfoWindow(marker, map, infoWindow, html, category) { 
     google.maps.event.addListener(marker, 'click', function() { 

     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 

     }); 
    } 
/***************************************************************/ 
} 

HTML：

<li> <input type="checkbox" id="Siyazanbox" onclick="boxwclick(this,'Siyazan')" /> <label>Siyazan</label></li> 

XML：

<marker><line id_line="1" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1221079493,41.0833787143;49.1227564511,41.0838059721;49.1230700892,41.0839889587;49.1241003797,41.0845428473"><point lng="41.0833787143" lat="49.1221079493"/><point lng="41.0838059721" lat="49.1227564511"/><point lng="41.0839889587" lat="49.1230700892"/><point lng="41.0845428473" lat="49.1241003797"/></line><line id_line="2" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1154421711,41.0761833833;49.1165550376,41.0749755563;49.1175163898,41.0740599835;49.1180954926,41.0734165180;49.1185257918,41.0727815949;49.1186139922,41.0726310877;49.1182901054,41.0724703018"><point lng="41.0761833833" lat="49.1154421711"/><point lng="41.0749755563" lat="49.1165550376"/><point lng="41.0740599835" lat="49.1175163898"/><point lng="41.0734165180" lat="49.1180954926"/><point lng="41.0727815949" lat="49.1185257918"/><point lng="41.0726310877" lat="49.1186139922"/><point lng="41.0724703018" lat="49.1182901054"/></line><line id_line="3" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1094929100,41.0733611765;49.1099543208,41.0733355826;49.1104145028,41.0733449452"><point lng="41.0733611765" lat="49.1094929100"/><point lng="41.0733355826" lat="49.1099543208"/><point lng="41.0733449452" lat="49.1104145028"/></line><line id_line="4" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1102213081,41.0792663250;49.1096951515,41.0788617355;49.1095352693,41.0787634195;49.1093125815,41.0786383847"><point lng="41.0792663250" lat="49.1102213081"/><point lng="41.0788617355" lat="49.1096951515"/><point lng="41.0787634195" lat="49.1095352693"/><point lng="41.0786383847" lat="49.1093125815"/></line><line id_line="5" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1087112084,41.0777986205;49.1090009844,41.0779000181;49.1091705193,41.0779693910;49.1097055392,41.0782304164"><point lng="41.0777986205" lat="49.1087112084"/><point lng="41.0779000181" lat="49.1090009844"/><point lng="41.0779693910" lat="49.1091705193"/><point lng="41.0782304164" lat="49.1097055392"/></line><line id_line="6" colour="null" width="2" diameter="110" contract="WWS2" contractor="SADE Compagnie Generale de Travaux D'Hydraulique" projectid="NWSSP-2" complated="0" rayon="Siyazan" type="dl" coordinats="49.1110047809,41.0815780616;49.1110894030,41.0814954941;49.1111775916,41.0814095421;49.1114574103,41.0811056406;49.1117100334,41.0808386785;49.1119646593,41.0806189159;49.1121959306,41.0803810984;49.1123847807,41.0802126892;49.1125497290,41.0800566494;49.1126203282,41.0800033545"><point lng="41.0815780616" lat="49.1110047809"/><point lng="41.0814954941" lat="49.1110894030"/><point lng="41.0814095421" lat="49.1111775916"/><point lng="41.0811056406" lat="49.1114574103"/><point lng="41.0808386785" lat="49.1117100334"/><point lng="41.0806189159" lat="49.1119646593"/><point lng="41.0803810984" lat="49.1121959306"/><point lng="41.0802126892" lat="49.1123847807"/><point lng="41.0800566494" lat="49.1125497290"/><point lng="41.0800033545" lat="49.1126203282"/></line> 

Answer 1

要切換折線：

yourPolyLine.setMap(yourMap); 
yourPolyLine.setMap(null);