Javascript 标记管理器将不显示标记
我试图用谷歌地图窗口制作一个简单的网页。在这个窗口中，我有一个站点位置标记（可以通过填写新的lat和lon并单击“检查站点”按钮来更改）。 按下时，会将场地标记和中心移动到场地。除此之外，我想用标记管理器加载一个范围标记。我已经预先定义了一些要测试的标记。稍后，这将是一个巨大的标记列表（供参考的NOAA站）。我希望每个站点标记都可以单击，并在单击时选中相应的复选框。我试图实现这个，但我的标记似乎没有显示出来。我找了又找，但似乎找不出它们为什么不出现。 我的网页代码如下 一个附带的问题：将数千（10k+）个标记（分布在世界各地）加载到应用程序中的合适方法是什么。标记管理器仅显示边界内的标记是否真的那么有效，还是仍然有限制。我还可以想象，加载数千个标记需要加载相当多的数据。请在此输入您的信息。 谢谢Javascript 标记管理器将不显示标记,javascript,html,google-maps,google-maps-api-3,markermanager,Javascript,Html,Google Maps,Google Maps Api 3,Markermanager,我试图用谷歌地图窗口制作一个简单的网页。在这个窗口中，我有一个站点位置标记（可以通过填写新的lat和lon并单击“检查站点”按钮来更改）。 按下时，会将场地标记和中心移动到场地。除此之外，我想用标记管理器加载一个范围标记。我已经预先定义了一些要测试的标记。稍后，这将是一个巨大的标记列表（供参考的NOAA站）。我希望每个站点标记都可以单击，并在单击时选中相应的复选框。我试图实现这个，但我的标记似乎没有显示出来。我找了又找，但似乎找不出它们为什么不出现。 我的网页代码如下 一个附带的问题：将数千（1
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
var站=[
{“名称”：“Oostende”，“posn”：[51.233，2.917]，“代码”：（640809999）}，
{“名称”：“Gent”，“posn”：[51.183,3.817]，“代码”：（6431099999）}，
{“名称”：“Koksijde”，“posn”：[51.083,2.65]，“代码”：（6400099999）}，
{“name”：“Wevelgem”，“posn”：[80.817,3.2]，“code”：（6416099999）}，
{“name”：“Melle”，“posn”：[50.983,3.983]，“code”：（643409999）}，
{“名称”：“Uccle”，“posn”：[50.8,4.35]，“代码”：（6447099999）}，
{“名称”：“安特卫普”，“波斯尼亚”：[51.2,4.467]，“代码”：（645009999）”，
{“name”：“Retie”，“posn”：[51.217,5.033]，“code”：（6464099999）}，
{“名称”：“Goetsenhoven”，“posn”：[50.783,4.95]，“代码”：（646309999）”，
{“name”：“Schaffen”，“posn”：[51,5.067]，“code”：（646509999）}，
{“名称”：“Diepenbeek”，“posn”：[50.917,5.45]，“代码”：（647709999）”，
{“姓名”：“Chievres”，“posn”：[50.567,3.833]，“代码”：（643209999）}，
{“name”：“Bierset”，“posn”：[50.65,5.45]，“code”：（6478099999）}，
{“名称”：“Kleine Brogel”，“posn”：[51.167，5.467]，“代码”：（6479099999）”，
{“name”：“Ernage”，“posn”：[50.567,4.683]，“code”：（645909999）}
];
var red_标记=”http://maps.google.com/mapfiles/ms/icons/red-dot.png";
变量绿色_标记=”http://maps.google.com/mapfiles/ms/icons/green-dot.png";
var映射；
风险经理；
var位点标记；
var标记；
函数setupMap（）{
var latlng=新的google.maps.latlng（50.85,4.35）；
var mapElem=document.getElementById（“map-canvas-9”）；
变量映射选项={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新的google.maps.map（mapElem，mapOptions）；
site_marker=新建google.maps.marker({
位置：latlng，
地图：地图，
标题：“纬度N，经度”，
图标：红色标记
});
var listener=google.maps.event.addListener（映射'bounds_changed'，函数（）{
设置noaamarkers（）；
google.maps.event.RemovelListener（监听器）；
});
}
函数setupNoaaMarkers（）{
mgr=新MarkerManager（map）；
google.maps.event.addListener（mgr，'loaded'，function（）{
经理addMarkers（getNoaaMarkers（），8）；
经理刷新（）；
});
}
函数getNoaaMarkers（）{
var标记=[]；
用于（站点中的var位置）{
var title=place.name；
var posn=new google.maps.LatLng（place.posn[0]，place.posn[1]）；
var代码=place.code；
var marker=createMarker（posn、title、code）；
google.maps.event.addListener（标记'click'，函数（）{
if（document.getElementById（code）.checked）
{
document.getElementById（code）.checked=false；
}
其他的
{
document.getElementById（code）.checked=true；
}
});
标记器。推（标记器）；
}
返回标记；
}
函数changeSitePosition（）{
var lat=document.getElementById（“id_纬度”）.value；
var lon=document.getElementById（“id_经度”）.value；
如果（纬度===0和经度===0）
{
lat=50.85；
lon=4.35；
}
var latlng=新的google.maps.latlng（lat，lon）；
现场标记设置位置（板条）；
地图设置中心（latlng）；
}
纬度
十进制，在[-90,90]范围内，最多4位小数，例如：45.5
经度
十进制，在[0360]范围内，最多4位小数，例如：12.3
检查站点
乌斯滕德
绅士
科克西德
韦韦尔格姆
梅勒
脐带
安特卫普
雷蒂
戈森霍温
沙芬
Di
<!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>
<!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>