Смещение элементов при масштабировании

Рейтинг: 0Ответов: 3Опубликовано: 02.03.2025

Подскажите, почему при масштабировании карты смещаются маркеры и корректно они встают на место только при максимальном масштабе? Маркеры не привязываются к своим координатам на карте. Использую 3 версию карт, js код: По ссылке видео как сейчас визуально выглядит https://skr.sh/vURDfoXoOh7

export async function initMap(locations) {
  const $map = $('#map');
  if (!$map.length) return;

  // Ждем загрузки API
  await ymaps3.ready;

  const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls} = ymaps3;

  // Создаем карту
  const map = new YMap(document.getElementById('map'), {
      location: {
          center: [43.936861, 56.273099], 
          zoom: 11
      }
  });

  // Добавляем слои с кастомизацией
  map.addChild(new YMapDefaultSchemeLayer({
      customization: mapStyle
  }));
  map.addChild(new YMapDefaultFeaturesLayer({
      customization: mapStyle
  }));

  // Добавляем элементы управления
  // map.addChild(new YMapControls({position: 'right'}));

  // Добавляем маркеры на карту
  locations.forEach(location => {
      const markerElement = document.createElement('div');
      markerElement.className = 'map-marker';

      let markerContent = `
          <div class="map-marker__logo">
              <img src="${location.logo}" alt="${location.name}">
          </div>
          <div class="map-marker__content">
              <div class="map-marker__address">${location.address}</div>
          </div>
      `;

      markerElement.innerHTML = markerContent;

      const mapMarker = new YMapMarker(
          {
              coordinates: [location.coordinates[1], location.coordinates[0]],
          },
          markerElement
      );

      map.addChild(mapMarker);
  });
}

css:

.map-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d69f2;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
    opacity: 0.3;
}

.map-marker {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, z-index 0s;

    &:hover {

        .map-marker__content {
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
        }

        .map-marker__logo {
            transform: scale(1.05);
        }
    }

    &__logo {
        position: relative;
        width: 46px;
        height: 60px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: transform 0.3s ease;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: relative;
            z-index: 1000;
        }
    }

    &__content {
        background: #FFFFFF;
        border-radius: 16px;
       
        padding: 4px 12px;
        z-index: 998;
        transition: box-shadow 0.3s ease;
    }

    &__name {
        font-weight: 500;
        font-size: 14px;
        line-height: 1.2;
        color: #000F1F;
        margin-bottom: 4px;
    }

    &__address {
        color: #181716;
        font-family: $fontBase;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 116%;
        letter-spacing: 0.14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
}

Сами координаты в таком формате:

{
coordinates: [56.237737, 43.915212],
address: "Адрес",
logo: "./img/location/image.svg"
           },
   ```

Ответы

▲ 0

У вас маркер состоит из иконки и текста. Вы привязываете к координатам середину маркера, а не середину иконки. Похоже, надо смещение указывать по размеру иконки:

transform: translate(-23px, -60px);
▲ 0

transform: translate(-50%, calc(-50% - 24px));

▲ 0

Насколько видно по видео, центр меток неподвижен, если смотреть на всю метку с надписью. Похоже, что вы некорректно сделали привязку в CSS.