Клуб API Карт

Элементы управления вне карты 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,
нашел этот пример, использовать для элементов вне карты не удалось: https://tech.yandex.ru/maps/jsbox/2.1/zoom_layout
ant-sv,
Это пример изменения внешнего вида контрола масштабирования на карте.
В вашем случае надо слушать DOM-события на ваших элементах и в обработчике менять масштаб карты (см. метод Map.setZoom)
Полноэкранный режим придется делать самостоятельно
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 );
}

не поможете с полноэкранным режимом?
ant-sv,
меняйте контейнеру карты ширину с высотой и всё
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 );
}
ant-sv,
Добавить так же как и в неполноэкранном, что не получилось?
Окончательный работоспособный вариант:

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