javascript 使用MarkerClusterer的Google Maps API：如何更改标记簇选项？如何自定义群集图标？

我正在使用Google Maps API创建一个Web视图页面。我已经完成了实施，但我有一个关于标记群集选项的问题，该选项未被更新。
这是CDN

<script src="https://unpkg.com/@googlemaps/markerclusterer@latest"></script>

这是我的代码

markers.push(marker);
                        
                        const clusterStyles = [
                              {
                                url: 'https://developers.google.com/maps/documentation/javascript/examples/clusterer/m3.png',
                                textColor: 'white',
                                textSize: 14,
                                width: 50,
                                height: 50,
                              },
                            ];

                            const clusterOptions = {
                              styles: clusterStyles,
                              gridSize: 50,
                              maxZoom: 15,
                              minimumClusterSize: 3,
                            };

                            const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, clusterOptions });
                        google.maps.event.addListener(markers, 'clusterclick', onClusterClick);

i预期颜色更改为标记群集实际控制群集选项

我成功地定制了一个标记聚类器的标记，如下所示：

// Marker clusterer
const yourCluster = new MarkerClusterer({
    map: yourMap,
    markers: yourMarkers, // yourMarkers.slice(0, 3) if you want to have multiple clusters each with a different custom icon on the same map (e.g., set a clusterer for the first 3 markers)
    renderer: {
        render: ({ markers, _position: position }) => {
            return new google.maps.Marker({
                position: {
                    lat: position.lat(),
                    lng: position.lng(),
                },
                label: {
                    text: String(markers.length),
                    color: "white",
                },
                icon: "/path/to/your/cluster-icon-1.png",
            });
        },
    },
});

请参见下面的完整示例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="your-google-maps-container" style="width: 100%; height: 600px"></div>

        <script type="module">
            // Import MarkerClusterer
            import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";

            function initMap() {
                // Google Maps map
                const yourMap = new google.maps.Map(document.getElementById("your-google-maps-container"), {
                    center: { lat: 46.1176208, lng: 14.8671412 },
                    zoom: 8.5,
                    disableDefaultUI: true,
                });

                // Create an array of alphabetical characters to be used to label the markers
                const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

                // Add markers to the map
                const yourMarkers = coordinates.map((position, i) => {
                    const label = labels[i % labels.length];

                    const markerOptions = {
                        position,
                        draggable: false,
                    };

                    // If you want to have different custom icons (e.g., set a custom icon for the first 3 markers)
                    /*  
                    if (i < 3) {
                        markerOptions.icon = {
                            url: "/path/to/your/icon-group-1.png",
                            scaledSize: new google.maps.Size(32, 32),
                        };
                    }
                    */

                    const marker = new google.maps.Marker(markerOptions);

                    return marker;
                });

                // Marker clusterer
                const yourCluster = new MarkerClusterer({
                    map: yourMap,
                    markers: yourMarkers, // yourMarkers.slice(0, 3) if you want to have multiple clusters each with a different custom icon on the same map (e.g., set a clusterer for the first 3 markers)
                    renderer: {
                        render: ({ markers, _position: position }) => {
                            return new google.maps.Marker({
                                position: {
                                    lat: position.lat(),
                                    lng: position.lng(),
                                },
                                label: {
                                    text: String(markers.length),
                                    color: "black",
                                },
                                icon: "/path/to/your/cluster-icon-1.png",
                            });
                        },
                    },
                });
            }

            // Coordinates
            const coordinates = [
                { lat: 45.51698897666811, lng: 13.569763482476969, info: "Coordinate 1" },
                { lat: 45.530799151329255, lng: 13.649157423409125, info: "Coordinate 2" },
                { lat: 45.52550345079001, lng: 13.597301289331448, info: "Coordinate 3" },
                { lat: 46.36572773115262, lng: 14.10740802891841, info: "Coordinate 4" },
                { lat: 46.421743820980616, lng: 15.856193372578861, info: "Coordinate 5" },
                { lat: 46.68333311555929, lng: 16.220405662581804, info: "Coordinate 6" },
                { lat: 46.64288069309906, lng: 16.0463909344671, info: "Coordinate 7" },
            ];

            window.initMap = initMap;
        </script>

        <!-- Google Maps API -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" defer></script>
    </body>
</html>

javascript 使用MarkerClusterer的Google Maps API：如何更改标记簇选项？如何自定义群集图标？

1条答案

相关问题

热门标签

最新问答