地图标记不聚类

Posted 2023-03-28

【中文标题】地图标记不聚类

【英文标题】：Map markers not clustering

【发布时间】：2021-08-10 06:31:47

【问题描述】：

我有一张地图，其中有多个彼此非常接近的标记。尝试通过google dev kit集成marker聚类。

但是集群没有发生，并且控制台中也没有出现错误 - 这使得它有些棘手。

正在使用的地图数据：

  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 中加载的地图标记，但正如您所见。标记正在加载，但未聚类。

在绝望的尝试中，还尝试更改默认缩放级别，因为我认为这可能会造成问题。

链接：https://jsfiddle.net/pixelmedia/z1ke9bwq/37/

【问题讨论】：

self.marker 应该是 self.markers in var markerClusterer = new MarkerClusterer(this.map, self.marker, ... ); - 解决这个问题，它会工作，虽然每次调用 addMarker 函数时它都会创建新的集群，这可能不是你想要的... 相反，在创建所有标记后创建一次集群，然后将包含所有标记的数组传递给它。

【参考方案1】：

奇怪的是没有人用赏金回复你。

这是基于您的集群标记版本：

https://jsfiddle.net/qakbnx6h/1/

问题出在addMarker()，对于每个地方，您都创建了一个新的MarkerClusterer，因此集群无法正常工作。

解决它：

删除 addMark() 上的新 MarkerClusterer 从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;
,

将新标记推入数组 在地点的$.each 下方添加新的MarkerClusterer，并使用在第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",
);