我查看了文档但无法弄明白。我敢肯定我错过了一些愚蠢的东西。没有错误，但没有聚类。
我尝试从here中获取简单示例并将其添加到我已经处理过的地图中，但没有成功。如果可能的话，我想保持地图的肉质相同。我也在这里看了几个其他问题而没有运气。
如果有人能帮助我，我将非常感激。
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 800px;
height: 500px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
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>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.137551,-0.703125),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(map_canvas, map_options);
map.set('styles', [
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#888888' },
{ weight: 1.0 }
]
}, {
featureType: 'landscape',
elementType: 'geometry.fill',
stylers: [
{ hue: '#008f11' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ hue: '#054d8fd' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'off' }
]
}
]);
var iconBase = 'http://i1318.photobucket.com/albums/t658/greatergoodorg/';
var icons = {
people: {
name: 'People',
icon: iconBase + 'people_zps26d13009.png',
shadow: iconBase + 'shadow-people_zps4b39eced.png'
},
pets: {
name: 'Pets',
icon: iconBase + 'pets_zps15f549f2.png',
shadow: iconBase + 'shadow-pets_zps361068aa.png'
},
planet: {
name: 'Planet',
icon: iconBase + 'planet_zps2a8572ce.png',
shadow: iconBase + 'shadow-planet_zps9912e26b.png',
}
};
var infowindow = new google.maps.InfoWindow({maxWidth:200});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(21, 32)
},
animation: google.maps.Animation.DROP,
map: map
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(feature.data);
infowindow.open(map,marker);
map.setZoom(3);
map.setCenter(marker.getPosition());
});
/*...
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map,marker);
});
...*/
/*...
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
...*/
}
var features = [
{
position: new google.maps.LatLng(32.249974,-110.922089),
type: 'planet',
data: '<strong>The Madrean Archipelago Biodiversity Assesment</strong><p>Sky Island Alliance is the foremost source on the area of southern Arizona/New Mexico and northern Sonora known as the Sky Islands. Their MABA project studies the area and the data is used to protect land, preserve migratory corridors for animals in the area, and repair damaged habitat. Funding for the project was cut this year, and GreaterGood.org picked up the slack to fund 2013.</p>'
},
{
position: new google.maps.LatLng(0.263671,37.705078),
type: 'planet',
data: '<strong>Protect Vital Wildlife Corridors in Kenya</strong><p>African Wildlife Foundation</p>'
},
{
position: new google.maps.LatLng(15.749963,100.854492),
type: 'planet',
data: '<strong>Protect and Feed Thailand\'\s Elephants</strong><p>Alexander Abraham Foundation for The Surin Project for The Elephant Nature Foundation</p>'
},
{
position: new google.maps.LatLng(-102.744484,43.274956),
type: 'pets',
data: '<strong>Pine Ridge Indian Reservation Dog Rescue</strong><p>We are working with Red Rover to save the lives of dogs on the Pine Ridge Indian Reservation. So far we have helped to rescue hundreds of dogs and we are are continuing to fund this effort to solve the overpopulation problem on the reservation.</p>'
},
{
position: new google.maps.LatLng(-105.267563,40.027614),
type: 'pets',
data: '<strong>Save the Prarie Dog</strong><p>We are working with the Prarie Dog coalition to relocation groups of prarie dogs who would be affected by land development. Jane Goodall has said that the prarie dog is important to the survival of at least 9 other species in America.</p>'
},
{
position: new google.maps.LatLng(45.198188,-92.53089),
type: 'pets',
data: '<strong>Home For Life</strong><p>We are working hard to help build a home for life for rescued animals who may not have a chance to get adopted.</p>'
},
{
position: new google.maps.LatLng(34.743305,-82.252922),
type: 'pets',
data: '<strong>Care for Rescued Rabbits</strong><p>Rabbits need help too. That\'\s why We\'\ve partnered with the Rabbit Sanctuary to feed these cute little guys.</p>'
},
{
position: new google.maps.LatLng(40.24645,-75.134511),
type: 'pets',
data: '<strong>Emergency Transport Rig</strong><p>Animal Lifeline and IFAW</p>'
},
{
position: new google.maps.LatLng(-3.760458,-73.267136),
type: 'pets',
data: '<strong>Funding for Flooded Animal Shelter</strong><p>Amazon CARES</p>'
},
{
position: new google.maps.LatLng(47.605758,-122.326927),
type: 'people',
data: '<strong>Operation Sandwich</strong><p>Hunger in America is a very real issue. GreaterGood employees are volunteering their time once a week at Northwest Harvest to make sandwiches for those in need in Seattle. GreaterGood.org is funding the sandwiches for a full year.</p>'
},
{
position: new google.maps.LatLng(-13.987376,27.46582),
type: 'people',
data: '<strong>Educate Children in Zambia Orphaned by AIDS</strong><p>\(\American Friends of\)\ Cecily\'\s Fund</p>'
},
{
position: new google.maps.LatLng(34.166044,-118.528533),
type: 'people',
data: '<strong>Provide Support for Families Dealing with Autism</strong><p>ACT! Today</p>'
},
{
position: new google.maps.LatLng(-3.743329,-73.250656),
type: 'people',
data: '<strong>Medical Care in the Peruvian Amazon</strong><p>Amazon Promise</p>'
},
{
position: new google.maps.LatLng(-4.236856,-73.22113),
type: 'people',
data: '<strong>Amazon River Flooding</strong><p>Angels of the Amazon</p>'
},
{
position: new google.maps.LatLng(40.950538,-73.710322),
type: 'people',
data: '<strong>Helping Families Dealing With Autism</strong><p>Autism Speaks</p>'
},
{
position: new google.maps.LatLng(16.727619,98.58427),
type: 'people',
data: '<strong>Promoting the Mental Health of Displaced Burmese Refugees</strong><p>Burma Border Projects</p>'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, features, mcOptions);
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
document.getElementById('legend'));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><strong>Project Types</strong></div>
</body>
</html>
答案 0 :(得分：3)
您没有将google.maps.Marker对象数组添加到MarkerClusterer。
添加一个全局数组来存储google.maps.Markers：
var gmarkers=[];
将addMarker创建的标记添加到该数组中：
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(21, 32)
},
animation: google.maps.Animation.DROP,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(feature.data);
infowindow.open(map,marker);
map.setZoom(3);
map.setCenter(marker.getPosition());
});
}
将google.maps.Markers数组添加到MarkerClusterer（而不是“features”对象数组）。
var mc = new MarkerClusterer(map, gmarkers, mcOptions);