隱藏Google地圖標記

我可以用複選框隱藏或顯示Google地圖標記。但是我想在網頁打開時禁用加載標記。更多的兩天我在這個工作，但不工作。我該怎麼做。？隱藏Google地圖標記

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");

來源

2013-04-28 brio

你能解釋一下你所說的「並不意味着什麼加工」？ – Thierry 2013-04-28 19:32:11

當頁面打開所有標記加載..我需要它將被禁用，只顯示當我檢查chekbox。 – brio 2013-04-28 19:35:00

看來你正在調用show（'intake'），show（'reservoir'）等。如果這個代碼是在document.ready或類似的東西上執行的，那麼標記是可見的是正常的。 – Thierry 2013-04-28 19:38:28

如果你的代碼是「工作」（它看起來並不像它會從你已經張貼），更改：

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"複選框定義（所以你不要混淆用戶），應該在頁面加載時隱藏標記。

而且除了修復一些bug，不得不改變：

// == 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

來源

2013-04-28 22:37:50 geocodezip

我是這樣做..它不工作。（（.. .. – brio 2013-04-29 11:45:28

非常感謝兄弟！ – brio 2013-04-29 17:43:52

隱藏Google地圖標記

回答

相關問題