如何将 CSS-only 用于 Google 地图的群集图标

Question

我的目标是 CSS- 只有图标用于我的 Google 地图标记集群。我在文档的“高级示例”(link) 中看到 CSS-only 图标是可能的。但是，我一直无法将这个例子翻译成我自己的项目。

我试图构建一个 JSFiddle with my code，但由于 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", 
            });

我哪里漏掉了？我想要标记图标与“advanced example”中的标记图标完全一样，但我不知所措。我在网上广泛搜索了 css- 仅图标的示例，但找不到任何独立的示例。非常感谢您的帮助。

Answer 1

您使用的 MarkerClusterer 库版本错误。

使用这个：

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

proof of concept fiddle

代码片段：

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;
}

<!DOCTYPE html>
<html>

<head>
  <title>Marker Clustering</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=map_initialize" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="mapdivbig"></div>
</body>

</html>

如何将 CSS-only 用于 Google 地图的群集图标

How to use CSS-only for cluster icons for Google Maps

google-maps

markerclusterer