谷歌地图标记集群的自定义图标

谷歌地图标记集群是谷歌地图 API 提供的一种功能，用于将大量地图标记合并在一起，以减少视觉上的混乱和提高性能。集群的外观可以通过使用自定义图标来进行定制化，本文将介绍如何在谷歌地图上使用自定义图标来集群标记。

准备工作

在开始使用自定义图标之前，您需要先准备自己的图标。图标通常应该是 PNG 格式，尺寸为 64×64 像素，背景透明。您可以使用任何图像编辑器来创建自己的图标。

使用自定义图标

要使用自定义图标来标记地图上的点，您需要使用 MarkerClustererPlus 库，在 HTML 中导入它：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/markerclustererplus@2.1.4/dist/markerclustererplus.min.js"></script>

接下来，您需要创建自己的自定义图标对象：

var image = {
    url: 'path/to/icon.png',
    size: new google.maps.Size(64, 64),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(32, 32)
};

代码中的 url 属性应该是您自己图标的 URL 路径。size 属性应包含您图标的尺寸。origin 属性应该是一个指定图标左上角的坐标。anchor 属性应该是一个指定图标中心点的坐标。其中，“32” 是因为我们的图标为 64×64，因此中心点位于 (32, 32)。

接下来，您需要创建自定义图标的 marker：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(37.77493, -122.41942),
    icon: image
});

该代码块创建了一个标记，使用了前面创建的自定义图标。

最后，我们需要使用 MarkerClustererPlus 库，在谷歌地图上创建一个标记集群：

var markers = [
    new google.maps.Marker({position: new google.maps.LatLng(37.77493, -122.41942)}),
    new google.maps.Marker({position: new google.maps.LatLng(37.77593, -122.41742)}),
    new google.maps.Marker({position: new google.maps.LatLng(37.77593, -122.41542)})
];

var clusterer = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

该代码块创建了一个 markers 数组，其中包含三个标记。这些标记将被放置在一个集群器中，该集群器使用前面定义的自定义图标。请注意，imagePath 属性指定了使用的图标集。

总结

现在你知道如何使用自定义图标来集群谷歌地图标记了。记得导入 MarkerClustererPlus 库，并使用 new google.maps.Marker() 来创建您的自定义图标 marker。最终，将这些 marker 放入集群器中并为 imagePath 属性设置图标路径即可。