2
我看了看文檔，無法弄清楚。我相信我錯過了一些愚蠢的東西。沒有錯誤，但沒有集羣。谷歌地圖v3 MarkerClusterer沒有羣集
我試圖從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>
完美地工作！沒有意識到全球陣列。非常感謝。 –
您不需要使用全局數組，它只是將其添加到現有代碼中的最簡單方式，有辦法使用非全局數組來執行相同的操作。 – geocodezip