javascript - map 标记不聚类

Question

我有一张 map ，其中有多个彼此非常接近的标记。试图通过谷歌开发工具包集成标记聚类。
然而，集群没有发生，也没有在控制台中出现错误——这使得它有点棘手。
正在使用的 map 数据:

  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 中显示 map 。
我创建了一个 JSFiddle 来查看在#map 中加载的 map 标记，但正如您所见。标记正在加载，但不是聚类。
为了解决这个问题，我还尝试更改默认缩放级别，因为我认为这可能会造成问题。
链接: https://jsfiddle.net/pixelmedia/z1ke9bwq/37/

Answer 1

奇怪的是，没有人用赏金回复你。
这是基于您的集群标记版本:
https://jsfiddle.net/qakbnx6h/1/
问题出在 addMarker() ，对于每个地方，您创建了一个新的 MarkerClusterer所以集群不起作用。
要解决它:

删除新的 MarkerClusterer在 addMark()

从 addMaker() 返回标记

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);
            });  

    // return marker; 
    return marker;
},

将新标记插入数组

添加新的MarkerClusterer下面$.each位置并使用在第 3 步创建的数组标记

// markers array to store place marker
const markers = []
$.each(places, function() {
    // push new marker to array
    markers.push( self.addMarker(this));
});

// use the markers in MarkerClusterer
const markerClusterer = new MarkerClusterer(this.map, markers, {
  imagePath:  "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});