隐藏谷歌地图标记
Hide Google Maps Marker
我可以隐藏或显示谷歌地图标记与复选框。但我想禁用加载标记时,网页打开。我又想了两天,但还是没用。我该怎么做呢?
注。对不起,我的英语不好。
我代码:<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 +"&type="+ category +"&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 +"&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");
如果你的代码正在"工作"(从你发布的内容来看不像),修改:
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
});
工作示例相关文章:
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标,然后在单击另一个图标时切换,等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记,图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map)图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时,每 5 秒在地图上加载一次图钉不会显示图标