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 you have read our privacy policy.

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