个人中心
gpt4 book ai didi

google-maps - 使用 for 循环将标记聚类器添加到谷歌地图？

转载 作者：行者123 更新时间：2023-12-02 16:17:40 25 4
gpt4 key购买 nike

对于this map of Germany我介绍了选择抵制仇恨表的报刊亭。到目前为止，包含 14 个条目的最小化 map 运行良好。但有些地区有多个商店，而谷歌地图似乎只显示一个标记:

enter image description here

我知道实际上还有更多，如果您缩放这些位置，则会出现其他标记。但是如果该标记周围有更多标记，那么聚类会更好，它会显示标记的数量。我在 GitHub 上找到了这个:Marker Clusterer ，但即使有这个简单的示例，我也不知道如何将此库添加到我的 map 中。也许我对显示标记的 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和varmarkerCluster = new MarkerClusterer(map,markers);以及下面的markerClustervar map = new google.maps.Map(document.getElementById('map_canvas')); ...但没有成功。

有人可以帮我吗？ :-)

更新:带有 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);
    });
}

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>

关于google-maps - 使用 for 循环将标记聚类器添加到谷歌地图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29432426/

25 4 0
文章推荐： javascript - 无法设置jssor slider 的高度
文章推荐： javascript - Closure js 框架 - 将 ArrayBuffer 转换为字符串
文章推荐： javascript - 检查数组中的变量
文章推荐： javascript - 咖啡 -> javascript -> typescript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com