Как изменить цвет шрифта маркера Google maps clusterer

Question

Как изменить цвет шрифта маркера Google maps clusterer

Кто-нибудь может сказать мне, как изменить цвет шрифта маркера markerclusterer. Это мой текущий код для стилизации маркера

mcOptions = {styles: [{

                height: 27,

                url: "image.png",

                width: 35

                }],

                maxZoom: 8

                }



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

696 3

javascript css google-maps google-maps-api-3 markerclusterer

3 ответов:

Comments

Ничего не найдено.

Vikas Ghodke · Accepted Answer · 2017-02-20 15:55:43

Вы можете проверить эту документацию для маркерный кластеризатор под классом ClusterIconStyle

Существует опция с именем textColor, которая задает цвет текста метки, отображаемого на значке кластера.

Rahul Gupta · Accepted Answer · 2016-11-09 11:43:08

Рабочий JSFIDDLE для изменения свойств шрифта clustermarker. Ниже приведен код:

<!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 для получения дополнительных опций и настроек.

Razz · Accepted Answer · 2013-08-28 12:45:46

Попробуйте это

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