Элементы управления вне карты API 2.1

Пост в архиве.

ant-sv

11 марта 2016, 17:39

Для API 2.1 требуется назначить функционал zoom и fullscreen для элементов управления, находящихся за пределами контейнера с картой:

<div id="map"></div>
<div id="myControl">
  <div id="myZoomOut"></div>
  <div id="myZoomIn"></div>
  <div id="myFullScreen"></div>
</div>

8 комментариев

Авторизуйтесь, чтобы оставить комментарий

dimik

11 марта 2016, 17:50

Что именно не получилось?

ant-sv

11 марта 2016, 18:45

dimik,

нашел этот пример, использовать для элементов вне карты не удалось: https://tech.yandex.ru/maps/jsbox/2.1/zoom_layout

dimik

11 марта 2016, 19:19

ant-sv,

Это пример изменения внешнего вида контрола масштабирования на карте.
В вашем случае надо слушать DOM-события на ваших элементах и в обработчике менять масштаб карты (см. метод Map.setZoom)
Полноэкранный режим придется делать самостоятельно

ant-sv

11 марта 2016, 20:05

dimik,

zoom реализован!

var myZoom = 9;
function init(){
...
document.getElementById( 'myZoomOut' )
.addEventListener( 'click', function(e) {
myMap.setZoom( --myZoom, {duration: 200} ); }, false );

document.getElementById( 'myZoomIn' )
.addEventListener( 'click', function(e) {
myMap.setZoom( ++myZoom, {duration: 200} ); }, false );
}

не поможете с полноэкранным режимом?

dimik

11 марта 2016, 20:30

ant-sv,

меняйте контейнеру карты ширину с высотой и всё

ant-sv

11 марта 2016, 20:38

dimik,

вопрос как добавить элементы на карту в полноэкранном режиме. Переход в полноэкранный режим реализовал так:

function init(){
...
var fullscreenControl = new ymaps.control.FullscreenControl( {options: {visible: false}} );
myMap.controls.add( fullscreenControl );
document.getElementById( 'myFullscreen' )
.addEventListener( 'click', function(e) {
fullscreenControl.enterFullscreen(); }, false );
}

dimik

11 марта 2016, 20:50

ant-sv,

Добавить так же как и в неполноэкранном, что не получилось?

ant-sv

11 марта 2016, 21:56

Окончательный работоспособный вариант:

<script>
ymaps.ready(init);
var myMap;
function init(){
myMap = new ymaps.Map( "map", { center: [55.75, 37.57], zoom: 12, controls: [] });
var fullscreenControl = new ymaps.control.FullscreenControl( {options: {visible: false}} );
var zoomControl = new ymaps.control.ZoomControl( {options: {visible: false}} );
myMap.controls.add( fullscreenControl );
myMap.controls.add( zoomControl );
document.getElementById( 'myZoomOut' )
.addEventListener( 'click', function(e) {
myMap.setZoom( myMap.getZoom()-1, {duration: 200} ); }, false );
document.getElementById( 'myZoomIn' )
.addEventListener( 'click', function(e) {
myMap.setZoom( myMap.getZoom()+1, {duration: 200} ); }, false );
document.getElementById( 'myFullscreen' )
.addEventListener( 'click', function(e) {
fullscreenControl.enterFullscreen(); }, false );
fullscreenControl.events.add ( 'fullscreenenter', function(){
fullscreenControl.options.set( 'visible', true );
zoomControl.options.set( 'visible', true );
});
fullscreenControl.events.add ( 'fullscreenexit', function(){
fullscreenControl.options.set( 'visible', false );
zoomControl.options.set( 'visible', false );
});
}
</script>
<div id="map"></div>
<div id="myFullscreen"></div>
<div id="myZoomOut"></div>
<div id="myZoomIn"></div>