所以我有一个想要映射的棒球队列表,每个棒球队都有一个自定义的图标和文本窗口。由于我的主要缩放级别是4,所以大多数图标,尤其是东北部的图标都非常拥挤。
代码的一部分在下面,很抱歉太长了。这是我现在知道要做的事。曾尝试添加markcluster变量,但不确定如何将每个团队添加到其中,也不确定如何根据我遇到问题的团队创建多个集群。
<!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=AIzaSyBblZOVoLgeHeWlv_zt5dR6dlQbRHMUPKo&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.8282, -98.5795),
zoom: 4
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var padres = 'http://s7d2.scene7.com/is/image/Fathead/lgo_mlb_san_diego_padres?layer=comp&fit=constrain&hei=50&wid=200&fmt=png-alpha&qlt=95,0&op_sharpen=1&resMode=bicub&op_usm=0.0,0.0,0,0&iccEmbed=0';
var padresLatLng = new google.maps.LatLng(32.7073, -117.1566);
var padresmarker = new google.maps.Marker({
position: padresLatLng,
map: map,
icon: padres,
title: 'San Diego Padres'
});
var padresString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">San Diego Padres</h1>'+
'<div id="bodyContent">'+
'</div>'+
'</div>';
var padreswindow= new google.maps.InfoWindow({
content: padresString
});
google.maps.event.addListener(padresmarker, 'click', function() {
padreswindow.open(map, padresmarker);
});
var dodgers = 'http://i.cdn.turner.com/si/.element/img/4.0/global/baseball/mlb/logos/dodgers_50.png';
var dodgersLatLng = new google.maps.LatLng(34.0736, -118.2400);
var dodgersmarker = new google.maps.Marker({
position: dodgersLatLng,
map: map,
icon: dodgers,
title: 'Los Angeles Dodgers'
});
var dodgersString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Los Angeles Dodgers</h1>'+
'<div id="bodyContent">'+
'</div>'+
'</div>';
var dodgerswindow= new google.maps.InfoWindow({
content: dodgersString
});
google.maps.event.addListener(dodgersmarker, 'click', function() {
dodgerswindow.open(map, dodgersmarker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
至少必须包含markerclusterer.js
库并添加
var mc = new MarkerClusterer(map, [dodgersmarker, padresmarker]);
在CCD_ 2函数的末尾。Marker Clusterer需要一个映射作为参数,一个标记数组和选项作为可选参数。