Как использовать пользовательское значение в качестве текста / метки в google MarkerClusterer? [Дубликат]

Question

Как использовать пользовательское значение в качестве текста / метки в google MarkerClusterer? [Дубликат]

Создать свойства шрифта

from matplotlib.font_manager import FontProperties

fontP = FontProperties()
fontP.set_size('small')
legend([plot1], "title", prop=fontP)

1

javascript html google-maps markerclusterer

задан Adam 2 June 2016 в 17:24

1 ответ

Другие вопросы по тегам:

javascript html google-maps markerclusterer

Похожие вопросы:

score 1 · Accepted Answer

Создайте функцию «калькулятор», которая делает то, что вы хотите (суммирует свойство маркера, указывающее «количество людей».

Документация для функции «калькулятор». Возвращает объект со свойствами :

text (текст появится в кластере)
index (индекс в массив стилей для доступа к стилю для этого кластера.

/**
 *  The function for calculating the cluster icon image.
 *
 *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
 *  @param {number} numStyles The number of styles available.
 *  @return {Object} A object properties: 'text' (string) and 'index' (number).
 *  @private
 */
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
  var index = 0;
  var count = markers.length;
  var dv = count;
  while (dv !== 0) {
    dv = parseInt(dv / 10, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: count,
    index: index
  };
};

Если вы добавите свойство к своим данным, «число», вы можете сделать что-то вроде этого:

фрагмент кода:

window.onload = function() {
  // cluster marker
  var clusterMarker = [];

  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(50, 3),
    zoom: 6,
    mapTypeId: 'terrain'
  });


  // Some sample data
  var sampleData = [{
    lat: 50,
    lng: 3,
    number: 20

  }, {
    lat: 50,
    lng: 3.02,
    number: 1
  }];


  for (var i = 0; i < sampleData.length; i++) {

    var point = sampleData[i];
    var location = new google.maps.LatLng(point.lat, point.lng);

    // create marker at location
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      number: sampleData[i].number,
      title: "" + sampleData[i].number
    });

    // needed to cluster marker
    clusterMarker.push(marker);
  }

  var clusterer = new MarkerClusterer(map, clusterMarker, {
    imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m',
    maxZoom: 15
  });

  clusterer.setCalculator(function(markers, numStyles) {
    var index = 0;
    var count = 0;
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].number) {
        count += markers[i].number;
      } else {
        count++;
      }
    }
    var dv = markers.length;
    while (dv !== 0) {
      dv = parseInt(dv / 10, 10);
      index++;
    }

    index = Math.min(index, numStyles);
    return {
      text: count,
      index: index
    };
  });
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

<div id="map"></div>