我查看了文档，无法弄清楚。我确定我错过了一些愚蠢的东西。没有错误，但没有聚类。
我尝试从此处获取简单示例并将其添加到我已经在处理的地图中，但没有成功。如果可能的话，我想保持地图的内容不变。我还在这里查看了其他几个问题，但没有运气。
如果有人可以帮助我，我将非常感激。
<!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>