折线隐藏不起作用

时间:2013-05-06 09:32:48

标签: javascript google-maps-api-3

通过此代码,我可以显示和隐藏标记..此代码不适用于折线。  当页面加载所有行自动加载..任何人都可以建议如何在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>

1 个答案:

答案 0 :(得分:0)

要切换折线:

yourPolyLine.setMap(yourMap);
yourPolyLine.setMap(null);
相关问题