0

Подскажите, пожалуйста, как можно вывести свои данные внутри метки кластера вместо количества точек в кластере?

1 ответ 1

0

Настройка макета иконки кластера описана здесь: https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/ClusterPlacemark-docpage/

Я попробовал объединить написанное с примером в песочнице (https://tech.yandex.ru/maps/jsbox/2.1/clusterer_custom_icon ) - получилось вот так:

//https://tech.yandex.ru/maps/jsbox/2.1/clusterer_custom_icon

ymaps.ready(function() {
  var myMap = new ymaps.Map('map', {
      center: [55.751574, 37.573856],
      zoom: 8
    }, {
      searchControlProvider: 'yandex#search'
    }),

    // Переменная с описанием двух видов иконок кластеров.
    clusterIcons = [{
      href: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/clusterer_custom_icon/images/cat.png',
      size: [40, 40],
      // Отступ, чтобы центр картинки совпадал с центром кластера.
      offset: [-20, -20]
    }, {
      href: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/clusterer_custom_icon/images/cat2.png',
      size: [60, 60],
      offset: [-30, -30],
      // Можно задать геометрию активной области метки.
      // Если геометрия не задана, активной областью будет
      // прямоугольник.
      shape: {
        type: 'Circle',
        coordinates: [0, 0],
        radius: 30
      }
    }],
    // При размере кластера до 10 будет использована 'cat.png'.
    // При размере кластера больше 10 будет использована 'cat2.png'.
    clusterNumbers = [10],
    // Сделаем макет содержимого иконки кластера,      
    MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
      '<div style="color: #FF0000; font-weight: bold;">{{ options.myVar }}</div>'
    ),
    clusterer = new ymaps.Clusterer({
      // значение для вывода в метке кластера
      myVar: 'hello!',
      clusterIcons: clusterIcons,
      clusterNumbers: clusterNumbers,
      clusterIconContentLayout: MyIconContentLayout
    }),
    getPointData = function(index) {
      return {
        balloonContentBody: 'балун <strong>метки ' + index + '</strong>',
        clusterCaption: 'метка <strong>' + index + '</strong>'
      };
    },
    points = [
      [55.831903, 37.411961],
      [55.763338, 37.565466],
      [55.763338, 37.565466],
      [55.744522, 37.616378],
      [55.780898, 37.642889],
      [55.793559, 37.435983],
      [55.800584, 37.675638],
      [55.716733, 37.589988],
      [55.775724, 37.560840],
      [55.822144, 37.433781],
      [55.874170, 37.669838],
      [55.716770, 37.482338],
      [55.780850, 37.750210],
      [55.810906, 37.654142],
      [55.865386, 37.713329],
      [55.847121, 37.525797],
      [55.778655, 37.710743],
      [55.623415, 37.717934],
      [55.863193, 37.737000],
      [55.866770, 37.760113],
      [55.698261, 37.730838],
      [55.633800, 37.564769],
      [55.639996, 37.539400],
      [55.690230, 37.405853],
      [55.775970, 37.512900],
      [55.775777, 37.442180],
      [55.811814, 37.440448],
      [55.751841, 37.404853],
      [55.627303, 37.728976],
      [55.816515, 37.597163],
      [55.664352, 37.689397],
      [55.679195, 37.600961],
      [55.673873, 37.658425],
      [55.681006, 37.605126],
      [55.876327, 37.431744],
      [55.843363, 37.778445],
      [55.875445, 37.549348],
      [55.662903, 37.702087],
      [55.746099, 37.434113],
      [55.838660, 37.712326],
      [55.774838, 37.415725],
      [55.871539, 37.630223],
      [55.657037, 37.571271],
      [55.691046, 37.711026],
      [55.803972, 37.659610],
      [55.616448, 37.452759],
      [55.781329, 37.442781],
      [55.844708, 37.748870],
      [55.723123, 37.406067],
      [55.858585, 37.484980]
    ],
    geoObjects = [];

  for (var i = 0, len = points.length; i < len; i++) {
    geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i));
  }
  clusterer.add(geoObjects);
  myMap.geoObjects.add(clusterer);

  myMap.setBounds(clusterer.getBounds(), {
    checkZoomRange: true
  });
});
<!DOCTYPE html>
<html>

<head>
  <title>Создание кластеризатора с произвольными иконками</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

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

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.