如何仅使用 CSS 作为 Google 地图的群集图标

Question

我的目标是为我的 Google 地图标记集群提供纯CSS图标。我在文档的“高级示例”（链接）中看到，纯 CSS 图标是可能的。然而，我一直无法将这个例子转化为我自己的项目。

我尝试用我的代码构建一个 JSFiddle，但由于 API 限制，我似乎无法通过 JSFiddle 初始化地图。当我在网站上运行代码时，它会向地图添加数字，但没有图标，如下所示。

我创建了一些样式

  var styles = [{
      width: 30,
      height: 30,
      className: "custom-clustericon-1",
    },
    {
      width: 40,
      height: 40,
      className: "custom-clustericon-2",
    },
    {
      width: 50,
      height: 50,
      className: "custom-clustericon-3",
    },
  ];

我尝试像这样初始化：

var markerCluster = new MarkerClusterer(map, markers,
            {
                styles: styles,
                clusterClass: "custom-clustericon", 
            });

我在哪里错过了标记？我希望拥有与“高级示例”中的标记图标完全相同的标记图标，但我不知所措。我在网上广泛搜索了仅css 图标的示例，但找不到任何独立的示例。非常感谢您的帮助。

Answer 1

您使用的MarkerClusterer库版本错误。

使用这个：

<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>

概念证明小提琴

代码片段：

<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>

function map_initialize() {
  var mapoptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 0,
    maxZoom: 15,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: true
  };
  var styles = [{
      width: 30,
      height: 30,
      className: "custom-clustericon-1",
    },
    {
      width: 40,
      height: 40,
      className: "custom-clustericon-2",
    },
    {
      width: 50,
      height: 50,
      className: "custom-clustericon-3",
    },
  ];
  var map = new google.maps.Map(document.getElementById("mapdivbig"),
    mapoptions);
  var infoWin = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  var markers = locations.map(function(location, i) {
    bounds.extend(location);
    map.fitBounds(bounds);
    var marker = new google.maps.Marker({
      position: location
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(location.info);
      infoWin.open(map, marker);
    })
    return marker;
  });
  var markerCluster = new MarkerClusterer(map, markers, {
    styles: styles,
    clusterClass: "custom-clustericon",
  });
}
var locations = [{
    lat: 45.4208,
    lng: -123.8,
    info: 'Location 1'
  },
  {
    lat: 47.6117,
    lng: -122.345,
    info: 'Location 2'
  },
  {
    lat: 47.6308,
    lng: -122.375,
    info: 'Location 3'
  }
]

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#mapdivbig {
  width: 100%;
  height: 100%;
  background-color: grey;
}

#mapdiv {
  width: 100%;
  height: 325px;
  background-color: grey;
}

.custom-clustericon {
  background: var(--cluster-color);
  color: #fff;
  border-radius: 100%;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.custom-clustericon::before,
.custom-clustericon::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background: var(--cluster-color);
  opacity: 0.2;
  border-radius: 100%;
}

.custom-clustericon::before {
  padding: 7px;
}

.custom-clustericon::after {
  padding: 14px;
}

.custom-clustericon-1 {
  --cluster-color: #00a2d3;
}

.custom-clustericon-2 {
  --cluster-color: #ff9b00;
}

.custom-clustericon-3 {
  --cluster-color: #ff6969;
}