谷歌地图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

首先，您正在使用对象速记错误。

第二，这不是库的接口。

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