如何更改谷歌地图标记聚合器的字体颜色

Question

如何更改谷歌地图标记聚合器的字体颜色

javascriptcssgoogle-mapsgoogle-maps-api-3markerclusterer

8

请问有人可以告诉我如何更改聚合标记的字体颜色吗？这是我目前用于样式化标记的代码：

mcOptions = {styles: [{
                height: 27,
                url: "image.png",
                width: 35
                }],
                maxZoom: 8
                }

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

- user1320260

@VikasGhodke 我确实阅读了文档，这就是我如何在使用它时取得进展的原因。我错过了 textColor，可能是因为我对单词视觉上有点失灵 :). 这个问题已经解决了，如果你把它作为答案，我会标记它为正确的，以帮助未来的用户，因为目前还没有这样的问题。 - user1320260

4个回答

10

您可以查看这份关于Marker Clusterer的文档，其中包含有关类ClusterIconStyle的信息。

有一个选项名为textColor，它可以设置在聚合图标上显示的标签文本的颜色。

- Vikas Ghodke

这正是我想要的！:) 十分感谢！ - zur4ik

1

更新了损坏的链接（2017年） - Brett Gregson

@BrettGregson 我认为这是正确的链接 https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/docs/reference.html - Vasilii Suricov

http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html - Vasilii Suricov

1

textColor 在最新版本中似乎已经不存在了。有人知道新的解决方案吗？ - Raphaël Balet

5

您可以只在styles选项中传递一个元素，如下所示。

var options = {
    maxZoom: 15,
    styles:[{
        url: 'https://googlemaps.github.io/js-marker-clusterer/images/m1.png',
        width: 53,
        height: 53,
        textColor: '#fff',
    }]

};
var mc = new MarkerClusterer(map, markers, options);

但在这种情况下，您将为所有聚类大小（1-10-100）拥有一个图片。最好传递5个元素。每个聚类大小一个元素，但这会增加太多代码行数（我在地图上有3个聚类器）。因此，对我来说，以下内容有效。

var mc = new MarkerClusterer(map, [], {
    imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',  
    maxZoom: 15  
});
mc.setStyles(mc.getStyles().map(function (style) {
    style.textColor = '#fff';
    return style;
}));
mc.addMarkers(markers)

- Vasilii Suricov

0

public Bitmap makeIcon(String text, int textColor) {
    ensureViewsSetUp();
    if (mTextView != null) {
        mTextView.setText(text);
        mTextView.setTextColor(textColor);
    }
    return makeIcon();
}

在谷歌地图上有聚类，聚类的背景颜色默认为蓝色，而文本（数字）颜色为白色。如果你想改变文本颜色，那么你需要修改IconGenerator.java这个方法。

- Sayali

请为您的答案编写一些描述。原帖作者应该了解您的代码。谢谢。 - AmerllicA

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rahul Gupta · Accepted Answer

一个可用的JSFIDDLE，用于更改聚合标记的字体属性。以下是代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MarkerClusterer v3 Simple Example</title>
    <style >
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }
      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
    <script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>

    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var mcOptions = {
            //imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
          styles:[{

          url: "https://googlemaps.github.io/js-marker-clusterer/images/m1.png",
                width: 53,
                height:53,
                fontFamily:"comic sans ms",
                textSize:15,
                textColor:"red",
                //color: #00FF00,
          }]

        };
        var markerCluster = new MarkerClusterer(map, markers, mcOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

这里是API 参考链接，提供更多选项和自定义。