яндекс карта, перемещение за указателем мышки

86
26 июня 2021, 14:40

Как реализовать навигацию по яндекс карте так, чтобы перемещаться по карте можно было бы просто подводя мышку к краю области карты? Версия api 2.1 интересует. Я видел там есть какой-то метод который изменяет цент карты, но как передвигать её не нашел. Заранее спасибо!

Answer 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>

READ ALSO
Gulp, es6, наследование

Gulp, es6, наследование

эксперимента ради пытаюсь переписать сборщик с использованием классовХочу разделить Dev и Dist сборку в разные классы и наследовать общие модули...

97
Как установить выбранный диапазон дат по умолчанию?

Как установить выбранный диапазон дат по умолчанию?

Использую эту библиотеку для выбора диапазона дат: ссылка

108
Выполнение синхронного запроса Axios

Выполнение синхронного запроса Axios

Как выполнить синхронный запрос через axios?

72