Кнопка раскрытия карты Яндекс за пределами элемента карты

148

29 сентября 2021, 10:00

Нужно сделать стандартную кнопку раскрытия карты на весь экран, которая итак идет из коробки.

Сложность лишь в том, что кнопка должна находиться вне элемента карты и совершенно в другой иерархии, поэтому стилями толкать готовую кнопку - не вариант, нужна отдельная.

Изучив API совершенно не понял что тут можно поделать, вся документация ходит вокруг создания кнопок внутри карты, но никак не снаружи.

Может кто знает или хотя бы есть мысли по этому поводу.

Как добавить отдельную кнопку разворота карты?

Answer 1

Не в ту сторону копаете. Не надо создавать кнопку на карте, надо управлять картой. Используйте метод enterFullscreen контейнера карты

ymaps.ready(function () { 
    var myMap = new ymaps.Map('map', { 
            center: [55.751574, 37.573856], 
            zoom: 9 
        },{}); 
         
         
    $("#full").click(function(){ 
        myMap.container.enterFullscreen(); 
    }); 
});

#map { 
   width: 400px; 
   height: 200px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> 
 
<button id="full">full</button> 
<div id="map"></div>

Answer 2

Решил немного по-другому, через прямое создание объектов контролов и управления ими. В частности объекта FullScreenControll (документация) и вызова соответствующего метода.

ymaps.ready(init); 
 
function init () {    
    var myMap = new ymaps.Map('yamap', { 
        center: [55.76, 37.64],  
        zoom: 10, 
        controls: [] // no controls at start!!! 
    }); 
   
  // Manually create and add a control you want 
  var fullscreenControl = new ymaps.control.FullscreenControl(); 
  myMap.controls.add("fullscreenControl", fullscreenControl); // control name is mandatory if you want to get in next!!! 
   
  $("#btn").click(function(){ 
    var fullscreenControll =  myMap.controls.get("fullscreenControl"); // Get your controll  
    fullscreenControll.enterFullscreen(); // And use it! 
  }) 
   
  $("#btn2").click(function(){ 
    myMap.container.enterFullscreen(); // Works even if you did't add a control! 
  }) 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>