使用 for 循环将标记聚类器添加到 google 地图?
Adding marker clusterer to google maps with for-loop?
对于this map of Germany,我展示了选择抵制仇恨的报亭sheet。到目前为止,包含 14 个条目的最小化地图工作正常。但是有些地区,有不止一家商店,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">
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'));
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});
google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</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
...但是没有成功。
有人可以帮帮我吗? :-)
更新:带有 js-library clusterer 的版本:
<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">
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});
google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map-container">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
</html>
您的标记未被聚类,因为您从未将它们添加到 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);
});
}
代码片段:
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>
对于this map of Germany,我展示了选择抵制仇恨的报亭sheet。到目前为止,包含 14 个条目的最小化地图工作正常。但是有些地区,有不止一家商店,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">
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'));
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});
google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</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
...但是没有成功。
有人可以帮帮我吗? :-)
更新:带有 js-library clusterer 的版本:
<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">
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});
google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(this.title);infowindow.open(map, this);});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map-container">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
</html>
您的标记未被聚类,因为您从未将它们添加到 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);
});
}
代码片段:
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>