На сайте есть карта Yandex, v3.
Так инициализирую:
initMap();
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker, YMapControls} = ymaps3;
const {YMapZoomControl} = await ymaps3.import('@yandex/ymaps3-controls@0.0.1')
const map = new YMap(
// Передаём ссылку на HTMLElement контейнера
document.getElementById('map'),
// Передаём параметры инициализации карты
{
location: {
// Координаты центра карты
center: [37.588144, 55.733842],
// Уровень масштабирования
zoom: 10
}
}
);
// Добавляем слой для отображения схематической карты
map.addChild(new YMapDefaultSchemeLayer({ customization: mapCustomizationJSON }));
// Пытаюсь добавить кнопку Зума
map.addChild(
// Using YMapControls you can change the position of the control
new YMapControls({position: 'right'})
// Add the zoom control to the map
.addChild(new YMapZoomControl({}))
);
map.addChild(new YMapDefaultFeaturesLayer());
Дальше идёт добавление маркеров на карту, они успешно добавляются.
При клике на каждый Маркер запускается функция showInfo
// Функция отображения информации
function showInfo(point) {
const infoElement = document.getElementById('point-info-container');
// Вставляем в элемент inf-block данные, которые мы получим из переменной point
document.getElementById('point-info__name').innerText = point.meta_data.point_name[0];
document.getElementById('point-info__address').innerText = 'text';
infoElement.style.display = 'block';
// Центрируем карту по координатам точки и плавно увеличиваем зум
// map.setCamera({location:{center:[55.7558, 37.6173], zoom: 10}});
// map.setCenter([55.7558, 37.6173]);
// map.camera.setCenter([55.7558, 37.6173]);
// map.camera.lookAt({ coordinates: [55.7558, 37.6173], zoom: 12 });
// map.setCenter([55.7558, 37.6173], 12);
// map.camera.setCenter([55.7558, 37.6173], 12);
// map.location.set({ center: [55.7558, 37.6173], zoom: 12 });
// работает map.setLocation({ center: [55.7558, 37.6173], zoom: 14 });
// map.setCamera({ center: [55.7558, 37.6173], zoom: 14, duration:1000 });
// map.panTo([55.7558, 37.6173], { duration: 1000, easing: (t) => t });
// map.camera.set({ center: [55.7558, 37.6173], zoom: 12 }, { duration: 1000 });
// map.camera.moveTo([55.7558, 37.6173], { zoom: 12, duration: 1000 });
// map.setCamera({ center: [55.7558, 37.6173], zoom: 12, duration: 1000 });
}
Задача: сделать плавное наведение и увеличение Zoom'а при клике на Поинт. У меня сделать это не получается. Не могу найти нужный метод. Предложенные варианты напредлагал чатГпт. Из предложенного
работал только метод setLocation, но его проблема
в отсутствии плавности при приближении к поинту.
map.setLocation({ center: [55.7558, 37.6173], zoom: 14 });
Пытался задавать ему duration, но не помогло. Короче, помогите пожалуйста. Понимаю, что самый верный способ, найти этот метод в документации. Но я просто не могу найти. Не получается.