На вашем сайте используется карта Yandex версии 3. Я инициализирую карту следующим образом: <br/> <pre><code class="javascript">initMap();
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls} = ymaps3;
const {YMapZoomControl} = await ymaps3.import('@yandex/[email protected]');
const map = new YMap(
// Передаём ссылку на элемент контейнера карты
document.getElementById('map'),
// Указываем параметры инициализации карты
{
location: {
// Координаты центра карты
center: [37.588144, 55.733842],
// Уровень масштабирования
zoom: 10
}
}
);
// Добавляем слой для отображения схематической карты
map.addChild(new YMapDefaultSchemeLayer({ customization: mapCustomizationJSON }));
// Пытаюсь добавить кнопку для изменения масштаба
map.addChild(
// Используя YMapControls, можно изменить позицию управления
new YMapControls({position: 'right'})
// Добавляем элемент управления зумом на карту
.addChild(new YMapZoomControl({}))
);
map.addChild(new YMapDefaultFeaturesLayer());</code></pre> <br/> <br/> Далее я добавляю маркеры на карту, и они добавляются успешно. <br/> <br/> При клике на каждый маркер срабатывает функция showInfo. <br/> <pre><code class="javascript">// Функция для отображения информации
function showInfo(point) {
const infoElement = document.getElementById('point-info-container');
// Заполняем inf-block данными из переменной point
document.getElementById('point-info__name').innerText = point.meta_dat
Для реализации плавного наведения на маркеры карты Яндекс при клике на них, можно использовать функцию масштабирования карты (Zoom) и плавный переход (Animation). Это можно сделать, изменяя центр карты на координаты нажатого маркера и используя метод `setZoom` с анимацией.
Вот как вы можете расширить свой код, добавив плавный переход при клике на маркер:
```javascript
// Функция для отображения информации и плавного передвижения карты
function showInfo(point) {
const infoElement = document.getElementById('point-info-container');
// Заполняем инфоблок данными из переменной point
document.getElementById('point-info__name').innerText = point.meta_data.name; // Пример использования имени пункта
// Указываем координаты маркера
const coords = point.geometry.coordinates;
// Анимация перехода к метке
map.setCenter(coords, 14, {
checkZoomRange: true, // Проверяем диапазон масштабирования
duration: 500 // Длительность анимации в миллисекундах
});
}
```
В этом коде:
1. `setCenter` — метод, который устанавливает новый центр карты с заданными координатами.
2. Второй параметр `14` — это уровень масштабирования, который вы хотите применить (можете задать нужный уровень).
3. Объект с параметрами анимации, где `duration: 500` задает длительность анимации в миллисекундах.
### Пример добавления маркера с обработкой клика:
```javascript
// Пример добавления маркера на карту
const myMarker = new YMapMarker([55.736507, 37.618297]); // Задаем координаты маркера
myMarker.events.add('click', () => {
showInfo({
meta_data: { name: 'Мой маркер' }, // Замените на данные вашего маркера
geometry: { coordinates: [55.736507, 37.618297] }
});
});
map.addChild(myMarker);
```
С добавлением этого эффекта, каждая кнопка (маркер) при нажатии будет плавно приближаться на экран, создавая более интуитивный и красивый интерфейс для пользователя.
update()
map.update({ location: { center: [55.7558, 37.6173], zoom: 14, duration: 1000, } });