Как реализовать навигацию по яндекс карте так, чтобы перемещаться по карте можно было бы просто подводя мышку к краю области карты? Версия api 2.1 интересует. Я видел там есть какой-то метод который изменяет цент карты, но как передвигать её не нашел. Заранее спасибо!
-
ну вот этим самым методом и передвигать, вот только что будут делать пользователи мобильных устройств? – Stranger in the Q 29 авг '19 в 6:58
-
@StrangerintheQ, мобильные устройства нас не интересуют, только десктоп. Можете пример показать, как сделать событие подведения мышки к краю экрана и получения её текущих координат? – alexey romashev 29 авг '19 в 7:48
-
да, вот только доберусь до компа :) – Stranger in the Q 29 авг '19 в 7:50
-
@StrangerintheQ, спасибо, буду признателен) – alexey romashev 29 авг '19 в 7:53
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>
-
1