使用for-loop将标记clusterer添加到Google地图？

对于this map of Germany我介绍报亭，谁选择抵制仇恨表。迄今为止，具有14个条目的最小化地图工作良好。但也有一些地区，其中有一个以上的商店和谷歌地图似乎表明只有一个标志：使用for-loop将标记clusterer添加到Google地图？

enter image description here

我知道其实有更多，如果您在放大这些位置，其他的标记出现。但是聚类会更好，这表明标记的数量，如果这个标记周围有更多。我在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>

来源

2015-04-03 Sebastian

是什么代码看起来像你试图在那里添加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

您的标志不被聚集，因为你永远不将它们添加到MarkerClusterer。固定的一种方式，它是在创建他们增加他们：

for (var i in Orte) { 
    var p = Orte[i]; 
    var latlng = new google.maps.LatLng(p[0], p[1]); 
    bounds.extend(latlng); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: p[2], 
     icon: image 
    }); 
    markerCluster.addMarker(marker); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(this.title); 
     infowindow.open(map, this); 
    }); 
}

working fiddle

代码片段：

var Orte = [ 
 
    [51.418288, 7.339213, "EDEKA Schwalemeyer, Bommerfelder Ring 110, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"], 
 
    [51.418266, 7.342316, "Bonema Trinkhalle & Minishop, Bommerfelder Ring 86, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"], 
 
    [51.422492, 7.338546, "Kiosk, Auf dem Brenschen 21, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"], 
 
    [51.415127, 7.337124, "Holzofenbäckerei, Elberfelder Straße 11, 58452 Witten, Nordrhein-Westfalen. Quelle: http://goo.gl/jQe2Oo"] 
 
]; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map_canvas')); 
 
    var markerCluster = new MarkerClusterer(map, marker); 
 
    // map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(legende); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var image = { 
 
    url: "bildfrei.png", 
 
    size: new google.maps.Size(32, 32), 
 
    }; 
 

 
    for (var i in Orte) { 
 
    var p = Orte[i]; 
 
    var latlng = new google.maps.LatLng(p[0], p[1]); 
 
    bounds.extend(latlng); 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     title: p[2] 
 
     /*, 
 
        icon: image */ 
 
    }); 
 
    markerCluster.addMarker(marker); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.setContent(this.title); 
 
     infowindow.open(map, this); 
 
    }); 
 
    } 
 
    map.fitBounds(bounds); 
 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
 
    var newZoom = map.getZoom() - 2; 
 
    map.setZoom(newZoom); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

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; 
 
    height: 100%; 
 
} 
 
#map_canvas { 
 
    height: 100% 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 
 
<div id="map-container"> 
 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
 
</div>

来源

2015-04-04 15:34:43 geocodezip

太棒了！非常感谢你！ :-) – Sebastian 2015-04-05 10:26:42

使用for-loop将标记clusterer添加到Google地图？

回答

相关问题