google-maps - Google Maps Marker Clusterer 不显示集群图标

问题描述

我有一个带有一组标记的谷歌地图。我正在尝试将 MarkerClusterer 添加到它以简化视图。总的来说，从我在网上看到的情况来看，这样做应该很容易，但是当我尝试时，我的地图没有显示任何标记、集群或任何东西。我的代码如下：

function calculateCenter() {
            center = map.getCenter()
        }

        let center
        let worldCenter = new window.google.maps.LatLng(32.249974, 5.800781)
        let mapOptions = {
            center: worldCenter,
            zoom: 3,
            scrollwheel: false
        }

        let map = new google.maps.Map(document.querySelector('.banner--map--parks'), mapOptions)
        let infoWindow = new google.maps.InfoWindow()
        let markers = []

        map.addListener('idle', _ => {
            calculateCenter()
        })

        fetch('/api/parks.json')
        .then(response => response.json())
        .then(data => {
            data.forEach(park => {
                if (park.lat && park.lng) {
                    let title = park.name
                    let position = new google.maps.LatLng(park.lat, park.lng)
                    let icon = 'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue.png'
                    let marker = new google.maps.Marker({
                        position: position
                        title: title,
                        icon: icon,
                        // map: map
                    })

                    let parkIWContent = '<div class="iw"><a href="/parks/' + park.id + '">' + park.name + '</a></div>'

                    marker.addListener('click', (function(marker, parkIWContent) { 
                        return function() {
                            infoWindow.setContent(parkIWContent);
                            infoWindow.open(map, marker);
                            // map.panTo(new google.maps.LatLng(park.lat, park.lng))
                        };
                    })(marker, parkIWContent))

                    markers.push(marker)
                }
            })
        })

        console.log(markers)

        let markerCluster = new MarkerClusterer(map, markers)

        map.addListener("click", _ => {
            infoWindow.close()
        })

如您所见，在某一时刻，我确实输出了标记数组，它们都显示在控制台中，但仍然无法在地图上显示。

任何人都可以发现可能导致此问题的代码问题吗？

谢谢

标签： google-mapsgoogle-maps-api-3markerclusterer

google-maps - Google Maps Marker Clusterer 不显示集群图标

问题描述

解决方案

推荐阅读