Как реализовать навигацию по яндекс карте так, чтобы перемещаться по карте можно было бы просто подводя мышку к краю области карты? Версия api 2.1 интересует. Я видел там есть какой-то метод который изменяет цент карты, но как передвигать её не нашел. Заранее спасибо!
Вот пример, основанный на сдвиге центра карты, условия выглядят чуть убого, можно придумать формулу поизящнее, но это пусть останется за рамками данного ответа.
let size = 50;
let maps = [map1, map2];
ymaps.ready(e => {
map("map1", 60, 30);
map("map2", 49, -123);
addEventListener('mousemove', onMouseMoved);
addEventListener('mouseout', onMouseOut);
});
function map(id, lat, lon) {
window[id]._instance = new ymaps.Map(id, {
center: [lat, lon],
zoom: 11,
controls: []
});
}
function onMouseOut() {
maps.forEach(map => {
map.dataset.speedX = 0;
map.dataset.speedY = 0;
});
}
function onMouseMoved(e) {
let x = e.x, y = e.y;
maps.forEach(map => {
let r = map.getBoundingClientRect();
let d = map.dataset;
d.speedX = 0;
let matchY = y > r.top && y < r.bottom;
if (matchY && x > r.x && x < r.x + size)
d.speedX = -1;
if (matchY && x > r.right - size && x < r.right)
d.speedX = 1;
d.speedY = 0;
let matchX = x > r.left && x < r.right;
if (matchX && y > r.y && y < r.y + size)
d.speedY = 1;
if (matchX && y > r.bottom - size && y < r.bottom)
d.speedY = -1;
})
}
setInterval(changeCenter, 10)
function changeCenter() {
maps.forEach(map => {
let d = map.dataset;
if (+d.speedX || +d.speedY) {
let coords = map._instance.getCenter();
coords[0] += (+d.speedY)*0.001;
coords[1] += (+d.speedX)*0.001;
map._instance.setCenter(coords);
}
});
}
body {
overflow: hidden;
margin: 0;
}
#map1, #map2 {
display: inline-block;
width: 50vw;
height: 100vh;
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map1"></div><div id="map2"></div>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей