Question

我正在尝试做类似https://developer.here.com/api-explorer/maps-js/v3.0/clustering/marker-clustering

我需要更改图标，但保留代表簇中标记数量的数字。

我可以更改图标，但无法保留数量。

Answer 1

我可以这样：

具有

的SVG

 <text id="!" font-family="Montserrat-SemiBold, Montserrat" font-size="13" font-weight="500" fill="#ECECEC">
                        <tspan x="3.193" y="15">{text}!</tspan>
                    </text>

然后使用自定义主题：

CustomTheme = {
                getClusterPresentation: cluster => {
                    const weight = cluster.getWeight();
                    const radius = weight * 5;

                    const svgString = icons.alertClusterPresentation
                        .replace(/\{text\}/g, weight.toString());
                    const clusterMarker = new H.map.Marker(cluster.getPosition(), {
                        icon: new H.map.Icon(svgString, {
                            size: { w: radius, h: radius },
                            crossOrigin: false,
                        }),
                        // Set min/max zoom with values from the cluster,
                        // otherwise clusters will be shown at all zoom levels:
                        min: cluster.getMinZoom(),
                        max: cluster.getMaxZoom(),
                    });
                    return clusterMarker;
                },

非常感谢您！

Answer 2

市场上有很多基于四叉树算法的库。

请参阅：-

https://en.wikipedia.org/wiki/Quadtree

https://github.com/googlemaps/js-marker-clusterer

如何显示群集中的标记数量

2 个答案: