我正在尝试使用Google地图窗口创建一个简单的网页。在这个窗口中，我有一个站点位置标记（可以通过填写新的lat和lon并单击“检查站点”按钮来更改）。 按下时，它会移动站点标记并居中到站点。除此之外，我想用标记管理器加载范围标记。我预先定义了一些要测试的标记。稍后，这将是一个巨大的标记列表（NOAA站FYI）。我希望每个站点标记都可以点击，并在单击时选中相应的复选框。我尝试实现这一点，但似乎我的标记没有显示。我搜索和搜索，但似乎无法找出他们为什么没有显示。 我的网页代码如下。
一个附带问题：将数千（10k +）个这些标记（分布在世界各地）加载到应用程序中的适当方法是什么。标记管理器通过仅显示边界内的标记是否真的有效，或者它是否仍有限制。我还想象加载数千个标记是相当多的数据加载。请在这里输入你的意见。 谢谢！
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPtpV_saW7qtACfPVYBWIB-Jw253iBca4&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<script type="text/javascript">
var stations =[
{ "name": "Oostende", "posn": [51.233, 2.917], "code":"(64080,99999)" },
{ "name": "Gent", "posn": [51.183, 3.817], "code":"(64310,99999)" },
{ "name": "Koksijde", "posn": [51.083, 2.65], "code":"(64000,99999)" },
{ "name": "Wevelgem", "posn": [80.817, 3.2], "code":"(64160,99999)" },
{ "name": "Melle", "posn": [50.983, 3.983], "code":"(64340,99999)" },
{ "name": "Uccle", "posn": [50.8, 4.35], "code":"(64470,99999)" },
{ "name": "Antwerpen", "posn": [51.2, 4.467], "code":"(64500,99999)" },
{ "name": "Retie", "posn": [51.217, 5.033], "code":"(64640,99999)" },
{ "name": "Goetsenhoven", "posn": [50.783, 4.95], "code":"(64630,99999)" },
{ "name": "Schaffen", "posn": [51, 5.067], "code":"(64650,99999)" },
{ "name": "Diepenbeek", "posn": [50.917, 5.45], "code":"(64770,99999)" },
{ "name": "Chievres", "posn": [50.567, 3.833], "code":"(64320,99999)" },
{ "name": "Bierset", "posn": [50.65, 5.45], "code":"(64780,99999)" },
{ "name": "Kleine Brogel", "posn": [51.167, 5.467], "code":"(64790,99999)" },
{ "name": "Ernage", "posn": [50.567, 4.683], "code":"(64590,99999)" }
];
var red_marker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
var green_marker = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
var map;
var mgr;
var site_marker;
var markers;
function setupMap() {
var latlng = new google.maps.LatLng(50.85, 4.35);
var mapElem = document.getElementById("map-canvas-9");
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapElem, mapOptions);
site_marker = new google.maps.Marker({
position: latlng,
map: map,
title: " latitude N, longitude ",
icon: red_marker
});
var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
setupNoaaMarkers();
google.maps.event.removeListener(listener);
});
}
function setupNoaaMarkers() {
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function(){
mgr.addMarkers(getNoaaMarkers(),8);
mgr.refresh();
});
}
function getNoaaMarkers() {
var markers=[];
for (var place in stations) {
var title = place.name;
var posn = new google.maps.LatLng(place.posn[0], place.posn[1]);
var code = place.code;
var marker = createMarker(posn, title, code);
google.maps.event.addListener(marker, 'click', function() {
if (document.getElementById(code).checked)
{
document.getElementById(code).checked=false;
}
else
{
document.getElementById(code).checked=true;
}
});
markers.push(marker);
}
return markers;
}
function changeSitePosition() {
var lat = document.getElementById("id_latitude").value;
var lon = document.getElementById("id_longitude").value;
if (lat === 0 & lon===0)
{
lat = 50.85;
lon = 4.35;
}
var latlng = new google.maps.LatLng(lat, lon);
site_marker.setPosition(latlng);
map.setCenter(latlng);
}
</script>
</head>
<body onload="setupMap()">
<div id="map-canvas-9" style="width: 800px; height: 300px;" class="easy-map-googlemap">
</div>
<table>
<tr>
<td>Latitude</td>
<td><input id="id_latitude" max="90" min="-90" name="latitude" step="0.0001" type="number" /></td>
<td></td>
<td>In decimal degree, within [-90,90], max. 4 decimals, e.g. : 45.5 </td>
</tr>
<tr>
<td>Longitude</td>
<td><input id="id_longitude" max="180" min="-180" name="longitude" step="0.0001" type="number" /></td>
<td></td>
<td>In decimal degree, within [0,360], max. 4 decimals, e.g. : 12.3 </td>
</tr>
<tr>
<td><button onclick="changeSitePosition()">Check site</button></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64080, 99999)" /> Oostende</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64310, 99999)" /> Gent</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64000, 99999)" /> Koksijde</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64160, 99999)" /> Wevelgem</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64340, 99999)" /> Melle</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64470, 99999)" /> Uccle</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64500, 99999)" /> Antwerpen</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64640, 99999)" /> Retie</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64630, 99999)" /> Goetsenhoven</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64650, 99999)" /> Schaffen</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64770, 99999)" /> Diepenbeek</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64320, 99999)" /> Chievres</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64780, 99999)" /> Bierset</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64790, 99999)" /> Kleine Brogel</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64590, 99999)" /> Ernage</label></td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：2)
使用调试器。
HTML id's may not contain spaces
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPtpV_saW7qtACfPVYBWIB-Jw253iBca4&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<script type="text/javascript">
var stations =[
{ "name": "Oostende", "posn": [51.233, 2.917], "code":"(64080,99999)" },
{ "name": "Gent", "posn": [51.183, 3.817], "code":"(64310,99999)" },
{ "name": "Koksijde", "posn": [51.083, 2.65], "code":"(64000,99999)" },
{ "name": "Wevelgem", "posn": [80.817, 3.2], "code":"(64160,99999)" },
{ "name": "Melle", "posn": [50.983, 3.983], "code":"(64340,99999)" },
{ "name": "Uccle", "posn": [50.8, 4.35], "code":"(64470,99999)" },
{ "name": "Antwerpen", "posn": [51.2, 4.467], "code":"(64500,99999)" },
{ "name": "Retie", "posn": [51.217, 5.033], "code":"(64640,99999)" },
{ "name": "Goetsenhoven", "posn": [50.783, 4.95], "code":"(64630,99999)" },
{ "name": "Schaffen", "posn": [51, 5.067], "code":"(64650,99999)" },
{ "name": "Diepenbeek", "posn": [50.917, 5.45], "code":"(64770,99999)" },
{ "name": "Chievres", "posn": [50.567, 3.833], "code":"(64320,99999)" },
{ "name": "Bierset", "posn": [50.65, 5.45], "code":"(64780,99999)" },
{ "name": "Kleine Brogel", "posn": [51.167, 5.467], "code":"(64790,99999)" },
{ "name": "Ernage", "posn": [50.567, 4.683], "code":"(64590,99999)" }
];
var red_marker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
var green_marker = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
var map;
var mgr;
var site_marker;
var markers;
var infowindow = new google.maps.InfoWindow({});
function setupMap() {
var latlng = new google.maps.LatLng(50.85, 4.35);
var mapElem = document.getElementById("map-canvas-9");
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapElem, mapOptions);
site_marker = new google.maps.Marker({
position: latlng,
map: map,
title: " latitude N, longitude ",
icon: red_marker
});
var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
setupNoaaMarkers();
google.maps.event.removeListener(listener);
});
}
function setupNoaaMarkers() {
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function(){
mgr.addMarkers(getNoaaMarkers(),8);
mgr.refresh();
});
}
function getNoaaMarkers() {
var markers=[];
for (var place in stations) {
var title = place.name;
var posn = new google.maps.LatLng(stations[place].posn[0], stations[place].posn[1]);
var code = stations[place].code;
var marker = createMarker(posn, title, code);
}
return markers;
}
function changeSitePosition() {
var lat = document.getElementById("id_latitude").value;
var lon = document.getElementById("id_longitude").value;
if (lat === 0 & lon===0)
{
lat = 50.85;
lon = 4.35;
}
var latlng = new google.maps.LatLng(lat, lon);
site_marker.setPosition(latlng);
map.setCenter(latlng);
}
function createMarker(latlng,title,code) {
var marker = new google.maps.Marker({
map: map,
title: title,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(code);
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'click', function() {
if (document.getElementById(code).checked) {
document.getElementById(code).checked=false;
} else {
document.getElementById(code).checked=true;
}
});
return marker;
}
</script>
</head>
<body onload="setupMap()">
<div id="map-canvas-9" style="width: 800px; height: 300px;" class="easy-map-googlemap">
</div>
<table>
<tr>
<td>Latitude</td>
<td><input id="id_latitude" max="90" min="-90" name="latitude" step="0.0001" type="number" /></td>
<td></td>
<td>In decimal degree, within [-90,90], max. 4 decimals, e.g. : 45.5 </td>
</tr>
<tr>
<td>Longitude</td>
<td><input id="id_longitude" max="180" min="-180" name="longitude" step="0.0001" type="number" /></td>
<td></td>
<td>In decimal degree, within [0,360], max. 4 decimals, e.g. : 12.3 </td>
</tr>
<tr>
<td><button onclick="changeSitePosition()">Check site</button></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64080,99999)" /> Oostende</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64310,99999)" /> Gent</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64000,99999)" /> Koksijde</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64160,99999)" /> Wevelgem</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64340,99999)" /> Melle</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64470,99999)" /> Uccle</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64500,99999)" /> Antwerpen</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64640,99999)" /> Retie</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64630,99999)" /> Goetsenhoven</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64650,99999)" /> Schaffen</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64770,99999)" /> Diepenbeek</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64320,99999)" /> Chievres</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64780,99999)" /> Bierset</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64790,99999)" /> Kleine Brogel</label></td>
</tr>
<tr>
<td><label for="check"><input name="stations" type="checkbox" id="(64590,99999)" /> Ernage</label></td>
</tr>
</table>
</body>
</html>