隐藏/显示地图标记
Hide/Show Map Markers
不知是否有人能帮忙。
我正试图把一个脚本隐藏和显示在我的地图上的位置。我一直使用的主机代码在这里，我的代码如下所示:
!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>
当我尝试运行我的代码时，我得到以下错误:消息:期望的标识符，字符串或数字: 42字符:1
它指向的行是这个
function createMarker(point,findname,html,findcategory) {
我对此相当陌生，但我已经通过'Firebug'运行代码，它声明行id' missing: propertyid'，但我必须承认我不确定这是什么意思。
我只是想知道是否有人可以看看这个，请让我知道我哪里出错了。
多谢<<p> 更新代码/strong>
<!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>
我注意到的几个语法错误:
1)。你所有的代码都被封装在InfoWindow对象
中改变:
var infowindow = new google.maps.InfoWindow(
{
:
var infowindow = new google.maps.InfoWindow();
2)。
标记中的图标属性设置错误改变:
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 marker = new google.maps.Marker({
position: point,
icon: customIcons[findcategory],
shadow: iconShadow,
map: map,
title: findname,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
在做了这些更改之后，我在Visual Studio中没有收到任何语法错误。
编辑以包含额外的修复:
本页没有定义downloadUrl函数。您没有将脚本文件包含在页面的标题区域。
在Google maps api被引用的地方添加这个:
<script type="text/javascript" src="scripts/downloadxml.js"></script>
看起来您在createMarker函数中将point参数的名称更改为latlng，但在函数内没有更改它。位置属性仍然设置为point。而且，看起来您可能也遗漏了创建标记函数的右括号。
function createMarker(latlng,name,html,category) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng, //changed from '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);
});
} //is this where this function ends?
我建议您将所有这些脚本放到一个单独的文件中，然后使用<script type="text/javascript" src="path to your script" />标记引用它。这将使文件在将来更容易维护和排除故障。
相关文章：
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时，我想将地图设置为当前地理位置，但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标，然后在单击另一个图标时切换，等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记，图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map）图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时，每 5 秒在地图上加载一次图钉不会显示图标
