對於this map of Germany我介紹報亭,誰選擇抵制仇恨表。迄今爲止,具有14個條目的最小化地圖工作良好。但也有一些地區,其中有一個以上的商店和谷歌地圖似乎表明只有一個標誌:使用for-loop將標記clusterer添加到Google地圖?
我知道其實有更多,如果您在放大這些位置,其他的標記出現。但是聚類會更好,這表明標記的數量,如果這個標記周圍有更多。我在GitHub上發現了這個:Marker Clusterer,但即使有一個簡單的例子,我也不知道如何將這個庫添加到我的地圖中。也許我對for循環有點困惑,以顯示標記。
的my map源基本上是這樣一個:
<html><head>
<style type="text/css">
html { height: 100% } body { height: 100%; margin: 0; padding: 0; } a { text-decoration:none; color:#000; } #map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=ACCESSTOKEN&sensor=false">
</script>
<script type="text/javascript">
\t
\t var Orte = [ \t
\t [51.418288,7.339213,"EDEKA Schwalemeyer, Bommerfelder Ring 110, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
\t [51.418266,7.342316,"Bonema Trinkhalle & Minishop, Bommerfelder Ring 86, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"], \t
\t [51.422492,7.338546,"Kiosk, Auf dem Brenschen 21, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
\t [51.415127,7.337124,"Holzofenbäckerei, Elberfelder Straße 11, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"]
\t ];
\t
\t function initialize()
\t \t {
\t \t var map = new google.maps.Map(document.getElementById('map_canvas'));
\t \t map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(legende); \t \t
\t \t var bounds = new google.maps.LatLngBounds();
\t \t var infowindow = new google.maps.InfoWindow();
\t \t var image = {url:"bildfrei.png",size:new google.maps.Size(32,32),};
\t \t
\t \t for (var i in Orte)
\t \t \t {
\t \t \t \t var p = Orte[i];
\t \t \t \t var latlng = new google.maps.LatLng(p[0],p[1]);bounds.extend(latlng);
\t \t \t \t var marker = new google.maps.Marker({position:latlng,map:map,title:p[2],icon:image});
\t \t \t \t google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
\t \t \t } \t \t
\t \t map.fitBounds(bounds);
\t \t }
\t \t google.maps.event.addDomListener(window, 'load', initialize); \t
\t
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
我已經嘗試添加markerclusterer_compiled.js和var markerCluster = new MarkerClusterer(map, markers);
及以下var map = new google.maps.Map(document.getElementById('map_canvas'));
的markerCluster
...但沒有成功。
有人可以幫我嗎? :-)
UPDATE:與JS庫聚類器版本:
<html><head>
<style type="text/css">
html { height: 100% } body { height: 100%; margin: 0; padding: 0; } a { text-decoration:none; color:#000; } #map-container { padding: 6px; border-width: 1px; border-style: solid;border-color: #ccC#ccC#999 #ccc;-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px; width: 600px; } #map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=ACCESSTOKEN&sensor=false">
<script>
var script = '<script type="text/javascript" src="markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
</script>
<script type="text/javascript">
\t
\t var Orte = [ \t
\t [51.418288,7.339213,"EDEKA Schwalemeyer, Bommerfelder Ring 110, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
\t [51.418266,7.342316,"Bonema Trinkhalle & Minishop, Bommerfelder Ring 86, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"], \t
\t [51.422492,7.338546,"Kiosk, Auf dem Brenschen 21, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"],
\t [51.415127,7.337124,"Holzofenbäckerei, Elberfelder Straße 11, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"]
\t ];
\t
\t function initialize()
\t \t {
\t \t var map = new google.maps.Map(document.getElementById('map_canvas'));
\t \t var markerCluster = new MarkerClusterer(map, marker);
\t \t map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(legende); \t \t
\t \t var bounds = new google.maps.LatLngBounds();
\t \t var infowindow = new google.maps.InfoWindow();
\t \t var image = {url:"bildfrei.png",size:new google.maps.Size(32,32),};
\t \t
\t \t for (var i in Orte)
\t \t \t {
\t \t \t \t var p = Orte[i];
\t \t \t \t var latlng = new google.maps.LatLng(p[0],p[1]);bounds.extend(latlng);
\t \t \t \t var marker = new google.maps.Marker({position:latlng,map:map,title:p[2],icon:image});
\t \t \t \t google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
\t \t \t } \t \t
\t \t map.fitBounds(bounds);
\t \t }
\t \t google.maps.event.addDomListener(window, 'load', initialize); \t
\t
</script>
</head>
<body onload="initialize()">
<div id="map-container">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
</html>
是什麼代碼看起來像你試圖在那裏添加markerclusterer?你看過所有關於SO的類似問題嗎? – geocodezip 2015-04-03 13:47:00
@geocodezip我更新了上面的帖子。 – Sebastian 2015-04-04 11:42:07
我得到一個JavaScript錯誤的發佈代碼:'未捕獲的ReferenceError:legende未定義# – geocodezip 2015-04-04 15:27:00