0

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

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

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

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

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

2 ответа 2

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>

2
  • Уже решил другим способом, я создал объект соответствующего контрола вручную и вручную же его метод, однако ваш способ раскрывает интересную особенность: если даже создать карту без контролов изначально, то метод container.enterFullscreen() все равно отрабатывает, означает ли это, что все методы всех контролов будут работать?
    – Yes Man
    22 окт 2019 в 17:59
  • это метод контейнера, у одноименного контрола просто аналогичный, который видимо делает проброс к контейнеру. контролы тут не при чем вообще.
    – teran
    22 окт 2019 в 19:21
1

Решил немного по-другому, через прямое создание объектов контролов и управления ими. В частности объекта 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.