谷歌地图 markerClusterer.MarkerClusterer 不使用 geoJSON

Question

任何想法为什么我的标记没有聚集？我尝试了许多不同的方法，但没有什么能让它们聚集在一起。我意识到我传递 markerClusterer 的参数可能有问题，但我找不到让它与任何东西一起工作的方法。关于 markerClusterer.MarkerClusterer（使用 unpkg 时需要）的文档也很少甚至没有。

function initMap() {
    //set map options
    var myMapOptions = {
        center: {lat: 40.7498024, lng: -73.9774375},
        zoom: 12,  
    }
    
    //fill the html div with a map and pass in map options
    var myNewMap = new google.maps.Map(document.getElementById('mymap'), myMapOptions);
    
    //pass in data
    myNewMap.data.loadGeoJson('missedConnections.geojson');

    //define popup windows
    var infowindow = new google.maps.InfoWindow({maxWidth: 750, autopanMargin: 10,});
    
    //create new popup windows on marker click
    myNewMap.data.addListener('click', function(event) {
        console.log(event);
        // set variables
        let videourl = event.feature.getProperty('videoURL');
        //padding/margin is wonky on mobile vs desktop
        let html = '<video style="padding-bottom: 5px; padding-right: 3px;" preload="none" autoplay width=" 90%"><source src="' + videourl + '"></video>'; 
        // show the html variable in the infowindow
        infowindow.setContent(html); 
        infowindow.setPosition(event.latLng);
        infowindow.setOptions({pixelOffset: new google.maps.Size(0, -30)}); 
        // move the infowindow up 42 pixels to the top of the default marker icon
        infowindow.open(myNewMap);
    });

    new markerClusterer.MarkerClusterer({myNewMap.data, myNewMap});

}

Answer 1

首先，您使用的是object shorthand incorrectly。

其次，这不是库的接口。

const markerCluster = new MarkerClusterer({ map, markers });

其中标记是google.maps.Markers 的数组。见MarkerClustererOptions。

Answer 2

进入你的html：

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

在你的 js 中，编写这两个代码

var mc = new markerClusterer.MarkerClusterer({ markers, map });

或

new markerClusterer.MarkerClusterer({ markers, map });