我有一张地图，上面有多个彼此非常接近的标记点。尝试通过Google开发套件集成标记点聚合功能。
然而，聚合并没有发生，同时控制台也没有报错信息，这使得问题有些棘手。
正在使用的地图数据：
var places = [{
"id": 1,
"name": "Test",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9630
},
"description": "This is a test",
"is_active": true
},
{
"id": 2,
"name": "Test2",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9430
},
"description": "This is a test",
"is_active": true
},
{
"id": 3,
"name": "Test3",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9530
},
"description": "This is a test",
"is_active": true
},
{
"id": 4,
"name": "Test4",
"coordinate": {
"latitude": -37.8136,
"longitude": 144.9670
},
"description": "This is a test",
"is_active": true
}]
Javascript：
var GoogleMap = {
map: null,
markers: {},
init: function(lat, lng, places) {
var self = this;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat, lng)
};
this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
this.infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(50, 50)
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
this.map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(), 12));
});
$.each(places, function() {
self.addMarker(this);
});
this.setCenterPoint();
},
// Create map markers
addMarker: function(place) {
var self = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude),
map: self.map,
title: place.name,
icon: place.image
});
console.log(place);
// Create information event for each marker
marker.info_window_content = 'TEST'
self.markers[place.id] = marker
google.maps.event.addListener(marker, 'click', function() {
self.infowindow.setContent(marker.info_window_content)
self.infowindow.open(self.map, marker);
});
// cluster the markers using google marker clusterer
var markerClusterer = new MarkerClusterer(this.map, self.marker, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
},
// Update map markers
updateMarkers: function(records) {
var self = this;
$.each(self.markers, function() {
this.setMap(null);
})
$.each(records, function() {
self.markers[this.id].setMap(self.map);
});
//Set map center
if (records.length) self.setCenterPoint();
},
// Set centre point for map
setCenterPoint: function() {
var lat = 0,
lng = 0;
count = 0;
//Calculate approximate center point based on number of JSON entries
for (id in this.markers) {
var m = this.markers[id];
if (m.map) {
lat += m.getPosition().lat();
lng += m.getPosition().lng();
count++;
}
}
if (count > 0) {
this.map.setCenter(new google.maps.LatLng(lat / count, lng / count));
}
}
};
// CHANGE MAP FOCUS:
function showCompany(lat, lng) {
var position = new google.maps.LatLng(lat, lng);
map.setCenter(position);
alert(lat, lng);
}
通过div ID“map”在HTML中显示地图。
我创建了一个JSFiddle来查看在＃map中加载地图标记，但是如你所见，标记正在加载，但未进行聚类。
为了试图解决问题，我还尝试更改默认的缩放级别，因为我认为这可能会导致问题。
self.marker应该改为self.markers，在var markerClusterer = new MarkerClusterer(this.map, self.marker, { ... });中 - 修复这个问题，它就能正常工作了，尽管每次调用addMarker函数时都会创建新的聚类，这可能不是你想要的... 相反，应该在所有标记创建完成后仅创建一次聚类，并将包含所有标记的数组传递给它。 - MrUpsidown