Смещение элементов при масштабировании
Подскажите, почему при масштабировании карты смещаются маркеры и корректно они встают на место только при максимальном масштабе? Маркеры не привязываются к своим координатам на карте. Использую 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"
},
```
Источник: Stack Overflow на русском