Javascript 隐藏/显示地图标记
我想知道是否有人能帮忙 我正在尝试编写一个脚本来隐藏和显示地图上的位置。我一直使用的主机代码是，我的代码如下所示：Javascript 隐藏/显示地图标记,javascript,html,google-maps-api-3,Javascript,Html,Google Maps Api 3,我想知道是否有人能帮忙 我正在尝试编写一个脚本来隐藏和显示地图上的位置。我一直使用的主机代码是，我的代码如下所示： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Javascript API v3 Example: Marker Categories</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
var customIcons = {
"Artefact": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Coin": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Jewellery": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Precious Metal": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var map = null;
var infowindow = new google.maps.InfoWindow(
{
// A function to create the marker and set up the event window
function createMarker(point,findname,html,findcategory) {
var contentString = html;
var marker = new google.maps.Marker({
position: point,
var icon = customIcons[findcategory],
shadow: iconShadow,
map: map,
title: findname,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = findcategory;
marker.myname = findname;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(findcategory) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == findcategory) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(findcategory+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(findcategory) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == findcategory) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(findcategory+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,findcategory) {
if (box.checked) {
show(findcategory);
} else {
hide(findcategory);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom:6,
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data
downloadUrl("loadpublicfinds.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("findosgb36lat"));
var lng = parseFloat(markers[i].getAttribute("findosgb36lon"));
var point = new google.maps.LatLng(lat,lng);
var findname = markers[i].getAttribute("findname");
var finddescription = markers[i].getAttribute("finddescription");
var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
var findcategory = markers[i].getAttribute("findcategory");
// create the marker
var marker = createMarker(point,findname,html,findcategory);
}
// == show or hide the categories initially ==
show("Artefact");
hide("Coin");
hide("Jewellery");
hide("Precious Metal");
// == create the initial sidebar ==
makeSidebar();
});
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<form action="#">
Artefact: <input type="checkbox" id="Artefactbox" onclick="boxclick(this,'Artefact')" />
Coin: <input type="checkbox" id="Coinbox" onclick="boxclick(this,'Coin')" />
Jewellery: <input type="checkbox" id="Jewellerybox" onclick="boxclick(this,'Jewellery')" /><br />
Precious Metal: <input type="checkbox" id="PreciousMetalbox" onclick="boxclick(this,'Precious_Metal')" /><br />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - Public Finds</title>
<link rel="stylesheet" href="css/publicfinds.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
"Artefact": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Coin": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Jewellery": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}, "Precious Metal": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = []; var markers;
var infowindow = new google.maps.InfoWindow();
function createMarker(latlng,name,html,category) { var contentString = html; var marker = new google.maps.Marker({ position: point, icon: customIcons[findcategory], shadow: iconShadow, map: map, title: findname, zIndex: Math.round(latlng.lat()*-100000)<<5 });
// === Store the category and name info as a marker properties ===
marker.mycategory = findcategory;
marker.myname = findname;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(findcategory) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == findcategory) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(findcategory+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(findcategory) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == findcategory) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(findcategory+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,findcategory) {
if (box.checked) {
show(findcategory);
} else {
hide(findcategory);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
} function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'terrain'
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Change this depending on the name of your PHP file
downloadUrl("loadpublicfinds.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("findosgb36lat"));
var lng = parseFloat(markers[i].getAttribute("findosgb36lon")); var point = new google.maps.LatLng(lat,lng); var findcategory = markers[i].getAttribute("findcategory"); var findname = markers[i].getAttribute("findname"); var finddescription = markers[i].getAttribute("finddescription");
var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
var marker = createMarker(point,findname,html,findcategory);
}
// == show or hide the categories initially ==
show("Artefact");
hide("Coin");
hide("Jewellery"); hide("Precious Metal");
// == create the initial sidebar ==
makeSidebar();
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
</script> </head> <body onLoad="load()">
<div id="map"></div> <!-- you can use tables or divs for the overall layout --> <form action="#">
Theatres: <input type="checkbox" id="Artefact" onclick="boxclick(this,'Artefact')" />
Golf Courses: <input type="checkbox" id="Coin" onclick="boxclick(this,'Coin')" />
Golf Courses: <input type="checkbox" id="Jewellery" onclick="boxclick(this,'Jewellery')" />
Tourist Information: <input type="checkbox" id="Precious Metal" onclick="boxclick(this,'Precious Metal')" /><br />
</form> </body> </html>
映射我的发现-公共发现
var customIcons={
“人工制品”：{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
“硬币”：{
图标：'http://labs.google.com/ridefinder/images/mm_20_green.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
“珠宝”：{
图标：'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}“贵金属”：{
图标：'http://labs.google.com/ridefinder/images/mm_20_blue.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
//此变量将收集最终放置在侧栏中的html
var side_bar_html=“”；
var gmarkers=[]；var标记；
var infowindow=new google.maps.infowindow（）；
函数createMarker（latlng，name，html，category）{var contentString=html；var marker=new google.maps.marker（{position:point，icon:customIcons[findcategory]，shadow:iconShadow，map:map，title:findname，zIndex:Math.round（latlng.lat（）*-100000）我注意到两个语法错误：
1.）所有代码都包装在InfoWindow对象中
更改此项：
var infowindow = new google.maps.InfoWindow(
{
var marker = new google.maps.Marker({
position: point,
var icon = customIcons[findcategory], //wont work
shadow: iconShadow,
map: map,
title: findname,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
为此：
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: point,
icon: customIcons[findcategory],
shadow: iconShadow,
map: map,
title: findname,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
2.）标记中的图标属性设置错误
更改此项：
var infowindow = new google.maps.InfoWindow(
{
var marker = new google.maps.Marker({
position: point,
var icon = customIcons[findcategory], //wont work
shadow: iconShadow,
map: map,
title: findname,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
我建议您将所有脚本放在一个单独的文件中，然后使用
标记引用它。这将使该文件在将来更易于维护和故障排除。您好，衷心感谢您查看并回复我的帖子。将您的更改合并到该页面中后，该页面现在看起来好多了。不过，我现在正在重新注册接收到以下错误“第129行应为对象字符3”，即这一行：“downloadUrl（“loadpublicfinds.php”），函数（数据）{'Firebug告诉我下载URL没有定义，但是我正在为其他页面运行这个脚本&除了字段名，它完全相同。我想它可能是前面的'var markers…'行，所以我把它改成了一个全局变量，没有任何运气。你有什么想法吗？尊敬的。我不知道你在哪里定义了道琼斯指数nloadURL（）函数。这就是为什么会出现错误。此函数是否在另一个脚本中，而您可能在此页面上没有引用？您好，非常感谢您这么快的回复。此函数未在页面中定义。正如我前面所说，我在其他几页中使用了此脚本，没有任何问题。代码源于此我回到了其他正在工作的脚本，这里找到了最初的“删除标记”演示。我看到的唯一区别是，最初的脚本说：downloadUrl（“categories.xml”，function（doc）{var xml=xmlParse（doc）；可能是这样吗？向您致意。我查看了您工作示例的源代码。顶部是has
这是定义downloadURL函数的地方。这一行未包含在该问题的页面中。答案已更新。看起来您仍然有语法错误。