我想知道是否有人可以帮忙。
我正在尝试整理一个隐藏并在地图上显示位置的脚本。我一直使用的主机代码是here，我的代码如下所示：
!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 Char：1
它指向的行是
function createMarker(point,findname,html,findcategory) {
我对此很新，但我通过'Firebug'运行代码并且它声明行ID'缺失：propertyid'但我必须承认我不确定这意味着什么。
我只是想知道是否有人可以看看这个，让我知道我哪里出错了。
非常感谢
更新代码
<!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>
答案 0 :(得分：0)
我发现了一些语法错误：
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，但未在函数内的任何位置更改它。 position属性仍设置为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" />标记引用它。它将使文件在将来更易于维护和排除故障。