我正在使用带有API v3的Google地图。我会添加许多标记，现在有问题，是否可以分组标记？例如，按城市？我正在使用一个小片段创建带标记按钮的侧栏。
以下是代码：
/**
* map
*/
var mapOpts = {
mapOpts: new google.maps.LatLng(60.28527,24.84864),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
// We set zoom and center later by fitBounds()
/**
* makeMarker() ver 0.2
* creates Marker and InfoWindow on a Map() named 'map'
* creates sidebar row in a DIV 'sidebar'
* saves marker to markerArray and markerBounds
* @param options object for Marker, InfoWindow and SidebarItem
* @author Esa 2009
*/
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, "click", function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if(this.sidebarButton)this.sidebarButton.button.focus();
});
var idleIcon = pushPin.getIcon();
if(options.sidebarItem){
pushPin.sidebarButton = new SidebarItem(pushPin, options);
pushPin.sidebarButton.addIn("sidebar");
}
markerBounds.extend(options.position);
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
/**
* Creates a sidebar item
* @constructor
* @author Esa 2009
* @param marker
* @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
*/
function SidebarItem(marker, opts){
var tag = opts.sidebarItemType || "button";
var row = document.createElement(tag);
row.innerHTML = opts.sidebarItem;
row.className = opts.sidebarItemClassName || "sidebar_item";
row.style.display = "block";
row.style.width = opts.sidebarItemWidth || "120px";
row.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
row.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
row.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
if(block && block.nodeType == 1)this.div = block;
else
this.div = document.getElementById(block)
|| document.getElementById("sidebar")
|| document.getElementsByTagName("body")[0];
this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
if(!this.div) return false;
this.div.removeChild(this.button);
return true;
}
/**
* markers and info window contents
*/
makeMarker({
position: new google.maps.LatLng(60.28527,24.84864),
title: "Vantaankoski",
sidebarItem: "Vantaankoski",
content: "Vantaankoski"
});
makeMarker({
position: new google.maps.LatLng(60.27805,24.85281),
title: "Martinlaakso",
sidebarItem: "Martinlaakso",
content: "Martinlaakso"
});
makeMarker({
position: new google.maps.LatLng(60.27049,24.85366),
title: "Louhela",
sidebarItem: "Louhela",
content: "Louhela"
});
makeMarker({
position: new google.maps.LatLng(60.26139,24.85478),
title: "Myyrmäki",
sidebarItem: "Myyrmäki",
content: "Myyrmäki"
});
makeMarker({
position: new google.maps.LatLng(60.24929,24.86128),
title: "Malminkartano",
sidebarItem: "Malminkartano",
content: "Malminkartano"
});
makeMarker({
position: new google.maps.LatLng(60.23963,24.87694),
title: "Kannelmäki",
sidebarItem: "Kannelmäki",
content: "Kannelmäki"
});
makeMarker({
position: new google.maps.LatLng(60.23031,24.88353),
title: "Pohjois-Haaga",
sidebarItem: "Pohjois<br>Haaga",
content: "Pohjois-Haaga"
});
makeMarker({
position: new google.maps.LatLng(60.21831,24.89354),
title: "Huopalahti",
sidebarItem: "Huopalahti",
content: "Huopalahti"
});
makeMarker({
position: new google.maps.LatLng(60.20803,24.92039),
title: "Ilmala",
sidebarItem: "Ilmala",
content: "Ilmala"
});
makeMarker({
position: new google.maps.LatLng(60.19899,24.93269),
title: "Pasila",
sidebarItem: "Pasila",
content: "Pasila"
});
makeMarker({
position: new google.maps.LatLng(60.17295,24.93981),
title: "Helsinki",
sidebarItem: "Helsinki",
content: "Helsinki"
});
/**
* fit viewport to markers
*/
map.fitBounds(markerBounds);
答案 0 :(得分：10)
Marker Clusterer
...该库为大量标记创建和管理每个缩放级别的聚类。这是V2 MarkerClusterer的V3实现。
答案 1 :(得分：9)
更好的是，使用MarkerClustererPlus。许多增强功能都包含了大量针对原始MarkerClusterer中发现的问题的错误修复。
答案 2 :(得分：7)
请在此处查看：Introduction to Marker Clustering With Google Maps和MarkerClusterer：http://code.google.com/p/gmaps-utility-library-dev/。
答案 3 :(得分：2)
您应该使用markerclusterer（http://gmaps-utility-library-dev.googlecode.com/svn/trunk/markerclusterer/docs/examples.html）。一个工作的例子：
function drop() {
for (var i = 0; i < markere.length; i++) {
//setTimeout(function() {//for maps with few markers works great to add them with delay
addMarker();
//}, i * 200);
}
//group markers; page loads a lot faster when you have many markers
var mc = new MarkerClusterer(map, markers);//group with markerclusterer (don't forget to include the js file)
//make sure they fit screen
var bounds = new google.maps.LatLngBounds();
for(var i=0;i<markers.length;i++){
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
}
function addMarker() {
/*before pushing we set some properties */
var marker = new google.maps.Marker({
position: markere[i],
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
flat: false,
icon: "./wp-content/themes/clear/images/obiectiv.png",
title: denumire[i]
})
/*set infowindow*/
var content = "<p><strong>"+denumire[i]+"</strong></p>";
var catStr = '';
var nrCat = categorii[i].length;
for (var j = 0; j < nrCat; j++) {
catStr += categorii[i][j];
}
content+= "<p>"+catStr+"</p>";
nrCatStr = "";
if (nrCat==1) nrCatStr = "categorie"
else if (nrCat>1) nrCatStr = "categorii";
content+= "<p>"+nrCat+" "+nrCatStr+"</p>";
/* //I don't use mouseover/mouseout
google.maps.event.addListener(marker, 'mouseover', function() {
this.infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.infowindow.close(map, this);
});*/
//google.maps.event.addListener(marker, 'click', toggleBounce);
infowindow = null;
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
stopBounce(markers);
});
infowindow.open(map, this);
toggleBounce(this);
});
markers.push(marker);
i++;
}/**/
drop();//drop the markers
function toggleBounce(obj) {
if (obj.getAnimation() != null) {
obj.setAnimation(null);
} else {
stopBounce(markers);//stop bouncing markers
obj.setAnimation(google.maps.Animation.BOUNCE);
}
}
function stopBounce(markers){
for (var k = 0; k < markers.length; k++) {
if (markers[k].getAnimation() != null) { markers[k].setAnimation(null); }
}
}
答案 4 :(得分：1)
下面的代码段可能会为您完成这项工作。
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 16,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
if(!map) {
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);}
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
bounds.extend(marker.position);
map.fitBounds(bounds);
google.maps.event.addListener(marker,'mouseover', ( function(marker) {
return function() {
var infowindow = new google.maps.InfoWindow();
// alert("hi");
var content = '<div class="map-content"><h3>' + address + '</h3> </div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
答案 5 :(得分：0)
Google代码已根据
弃用http://google-opensource.blogspot.com.es/2015/03/farewell-to-google-code.html
因此，之前答案中提到的所有库都迁移到了GitHub。你可以在
找到它们