Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
345 views
in Technique[技术] by (71.8m points)

javascript - Polyline Hide not working

By this code i can show and hide markers.. This code does not work with polylines. When page loading all lines automaticly loaded.. Can anyone suggest how to toggle polylines in googlemap?

Thanks.

P.S. Sorry for my English

   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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

To toggle a polyline:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...