Google マップ ウィンドウで簡単な Web ページを作成しようとしています。このウィンドウには、サイトの場所のマーカーがあります (新しい緯度と経度を入力して [サイトの確認] ボタンをクリックすることで変更できます)。押すと、サイト マーカーとセンターがサイトに移動します。それに加えて、Marker Manager で範囲マーカーをロードしたいと考えています。テストするいくつかのマーカーを事前定義しました。後で、これは巨大なマーカー リストになります (参考までに NOAA ステーションの)。これらの各駅マーカーをクリックできるようにし、クリックしたときに対応するチェックボックスをオンにします。これを実装してみましたが、マーカーが表示されていないようです。検索して検索しましたが、表示されない理由がわからないようです。私のウェブページのコードは以下です。
副次的な質問: 数千 (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>