隐藏Google地图标记

Question

我可以使用复选框隐藏或显示谷歌地图标记。但我希望在网页打开时禁用加载标记。我工作了两天但没有工作。 我怎么能这样做？？

P.S。抱歉我的英文。

我的代码：

<form action="#">
                  <li> <input type="checkbox" id="intakebox" onclick="boxclick(this,'intake')" checked="checked"/> <label>Intake</label></li>

                <li><input type="checkbox" id="reservoirbox" onclick="boxclick(this,'reservoir')"checked="checked"/> <label>Reservoirs</label></li>

               <li> <input type="checkbox" id="wspsbox" onclick="boxclick(this,'wsps')"checked="checked"/> <label>WSPS</label></li>

               <li> <input type="checkbox" id="wtpbox" onclick="boxclick(this,'wtp')"checked="checked"/> <label> WTP</label></li>

              <li><input type="checkbox" id="wwpsbox" onclick="boxclick(this,'wwps')"checked="checked"/> <label>WWPS</label></li>

               <li><input type="checkbox" id="wwtpbox" onclick="boxclick(this,'wwtp')" /> <label>WWTP</label></li>
</form> 

Js方面：

var myCoordsLenght = 6;
      var gmarkers = [];
     function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
         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 boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }

      }
    var customIcons = {
      reservoir: {
        icon: 'http://nn-gis.com/new1/js/ico/reservoir.png',
        shadow: ''
      },
      intake: {
        icon: 'http://nn-gis.com/new1/js/ico/intake.png',
        shadow: ''
      },
        wsps: {
        icon: 'http://nn-gis.com/new1/js/ico/wsps.png',
        shadow: ''
      },
        wtp: {
        icon: 'http://nn-gis.com/new1/js/ico/wtp.png',
        shadow: ''
      },
        wwtp: {
        icon: 'http://nn-gis.com/new1/js/ico/wwtp.png',
        shadow: ''
      },
        wwps: {
        icon: 'http://nn-gis.com/new1/js/ico/wwps.png',
        shadow: ''
      }
    };

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

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

      });
    }

    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("gxml.php", function(doc) {
     var xmlDoc = xmlParse(doc);

        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {





var type = markers[i].getAttribute("type");


if(type=='intake'){
            type2='<p align="center"><b>Intake</b></p> ';}
else {type2 = "";}


     if(type=='wwtp'){
            type2='<p align="center"><b>Wastewater treatment plant</b></p>  ';}
else {type2 = "";}

                        if(type=='wtp'){
            type2='<p align="center"><b>Water Treatment Plant</b></p> ';}
else {type2 =="";}

                        if(type=='reservoir'){
            type2= '<p align="center"><b>Reservoir</b></p> ';}
else {type2 == "";}
                        if(type=='wsps'){
            type2= '<p align="center"><b>Water supply pump station</b></p>';}
else {type2 == "";}                     if(type=='wwps'){
            type2= '<p align="center"><b>Wastewater pump station</b></p>';}
else {type2 == "";}


 /**********************  ***************************************/ 
          var oid = markers[i].getAttribute("contract");
 if (oid) {oid1 = "  <b> Contract:</b> " + oid + "<br/> ";
} else { oid1 = "";}

 /**********************  ***************************************/ 
          var cr = markers[i].getAttribute("contractor");
 if (cr) {cr1 = "  " + cr + "<br/> ";
} else { cr1 = "None";}
/**********************  ***************************************/
          var status = markers[i].getAttribute("status");
           if (status) {
    status1 = "<b> Status:</b> " + status + "<br/>";
} else  { status1 = "";}
/**********************  ***************************************/         
          var title = markers[i].getAttribute("projectid");
           if (title) {
    title1 = "<b> Project ID:</b> " + title + "<br/>";
} else 
{ title1 = "";}
/**********************  ***************************************/
           var name = markers[i].getAttribute("name");
           if (name) {
    name1 = "<b> Source:</b> " + name + "<br/>";
} else 
{ name1 = "";}
/**********************  ***************************************/
      var volume = markers[i].getAttribute("volume");
           if (volume) {
    volume1 = "<b> Volume:</b> " + volume + "<br/>";
} else {volume1 = "";}
/**********************  ***************************************/
      var flow = markers[i].getAttribute("FLOW_m3_d");
           if (flow) {
    flow1 = "<b> FLOW_m3_d:</b> " + flow + "<br/>";
} else {flow1 = "";}
/**********************  ***************************************/
      var pe = markers[i].getAttribute("pe");
           if (pe) {
    pe1 = "<b> PE:</b> " + pe + "<br/>";
} else {pe1 = "";}

/**********************  ***************************************/
      var dis = markers[i].getAttribute("dis");
           if (dis) {
    dis1 = "<b> Discharge:</b> " + dis + "<br/>";
} else {dis1 = "";}
/**********************  ***************************************/
  var qde = markers[i].getAttribute("qde");
           if (qde) {
    qde1 = "<b> Qdes_L_S:</b> " + qde + "<br/>";
} else {qde1 = "";}
/**********************  ***************************************/
  var qav = markers[i].getAttribute("qav");
           if (qav) {
    qav1 = "<b> Qave_L_S:</b> " + qav + "<br/>";
} else {qav1 = "";}
/**********************  ***************************************/
  var dut = markers[i].getAttribute("dut");
           if (dut) {
    dut1 = "<b> Duty Pumps:</b> " + dut + "<br/>";
} else {dut1 = "";}
/**********************  ***************************************/
 var kwh = markers[i].getAttribute("kwh");
           if (kwh) {
    kwh1 = "<b> KWh:</b> " + kwh + "<br/><hr>";
} else { kwh1 = "<hr>";}
/**********************  ***************************************/
  var puser = markers[i].getAttribute("puser");
  if (puser) {
    puser1 = "Last changed by  <b>" + puser + "</b><br/>";
} else {  puser1 = "";}
/**********************  ***************************************/
          var ucomp = markers[i].getAttribute("ucomplate");
           if (ucomp) {
    ucomp1 = "Completed: <b> <big>" + ucomp + "</big></b> ";
} else { ucomp1 = "";}
/**********************  ***************************************/
          var udate = markers[i].getAttribute("udate");
           if (udate) {
    udate1 = " [ " + udate + "]<br/>";
} else {  udate1 = "";}
/**********************  ***************************************/
          var suser = markers[i].getAttribute("suser");
           if (suser) 
{  suser1 = "<hr>Last changed by   <b>" + suser + "</b><br/>";
} else {suser1 = "";}
/**********************  ***************************************/
    var scomp = markers[i].getAttribute("scomplate");
    if (scomp) {
    scomp1 = "Completed: <b> <big>" + scomp+ "</big></b> ";
} else { scomp1="";   }

/**********************  ***************************************/     
  var sdate = markers[i].getAttribute("sdate");  
     if (sdate) {
    sdate1 = " [" + sdate + "]<br/><hr>";
} else { sdate1="";} 
/**********************  ***************************************/
           var capacity = markers[i].getAttribute("capacity");
           if (capacity) {
    capacity1 = "<b> Capacity:</b> " + capacity + "<br/>";
} else 
{ capacity1 = "";}

/**********************  ***************************************/
             var category  = markers[i].getAttribute("type");
            var id  = markers[i].getAttribute("id");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

function ShowMsg(textVal)
{
document.getElementById("msgid").innerHTML=textVal
}
function ClearMsg()
{
document.getElementById("msgid").innerHTML=""
}             


          var html ="" + type2 +  ' <a class=info href="#"><b>Contractor</b><span>' + cr1 +'</span></a> <br/> ' + oid1  + title1   + status1 + name1 + volume1 + capacity1 + flow1 + pe1 + qde1 + qav1 + dut1 + dis1 +  kwh1   + puser1  + ucomp1+  udate1 + suser1 +  scomp1 + sdate1 + "<br/>  <a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('cdata.php?title="+ title +"&amp;type="+ category +"&amp;id="+ id +"','cdata','height=300, width=460,scrollbars=no')\">* Add/Change Data</a>    <a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('photo/index.php?id="+ id +"&amp;type="+ category +"','cdata','height=600, width=800,scrollbars=no')\">Photo</a> <a class=\"inline-link-1\" HREF=\"javascript:void(0)\"onclick=\"window.open('pedit.php?id="+ id +"','cdata','height=300, width=460,scrollbars=no')\">Edit</a>"; 

       var icon = customIcons[category] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });

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

           bindInfoWindow(marker, map, infoWindow, html);
        }
      });



    google.maps.event.addListener(map, 'mousemove', function(evt){
    document.getElementById('lat').value = (evt.latLng.lat().toFixed(myCoordsLenght)+" lat");
    document.getElementById('long').value = (evt.latLng.lng().toFixed(myCoordsLenght)+" long");
});

}   

/**********************  ***************************************/



/***************************************************************/

        show("intake");
        show("reservoir");
        show("wsps");
        show("wtp");
        show("wwps");
        hide("wwtp");

Answer 1

如果您的代码“正常”（它与您发布的内容不同），请更改：

    show("intake");
    show("reservoir");
    show("wsps");
    show("wtp");
    show("wwps");
    hide("wwtp");

为：

    hide("intake");
    hide("reservoir");
    hide("wsps");
    hide("wtp");
    hide("wwps");
    hide("wwtp");

从您的复选框定义中移除checked="checked"（这样您就不会混淆用户），应该在页面加载时隐藏标记。

除了修复一些错误外，还得改变：

  // == shows all markers of a particular category, and ensures the checkbox is checked ==
 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;
  }

标记的定义：

      var marker = new google.maps.Marker({
        // map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });

working example