Основные параметры

Open in CodeSandbox

Основными параметрами карты являются область показа, область картографирования и тип карты.

При создании карты необходимо указать её центр и коэффициент масштабирования. В дальнейшем их можно изменить.

API предоставляет три встроенных типа карт:

  • Схема (yandex#map) — по умолчанию;
  • Спутник (yandex#satellite);
  • Гибрид (yandex#hybrid).

Тип карты реализуется в виде одного или нескольких наложенных друг на друга слоев. Существует возможность определения новых типов карт с помощью создания собственных слоев и/или комбинирования встроенных. 

<!DOCTYPE html>

<html>
    <head>
        <title>Основные параметры</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="mapparams.js" type="text/javascript"></script>
        <style>
            #map {
                width: 100%;
                height: 330px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <div id="buttons">
            <input
                type="button"
                value="Изменить центр"
                onclick="setCenter();"
            />
            <input
                type="button"
                value="Изменить границы"
                onclick="setBounds();"
            />
            <input
                type="button"
                value="Изменить тип и плавно переместиться"
                onclick="setTypeAndPan();"
            />
        </div>
    </body>
</html>

ymaps.ready(init);

var myMap;

function init() {
    // Параметры карты можно задать в конструкторе.
    myMap = new ymaps.Map(
        // ID DOM-элемента, в который будет добавлена карта.
        "map",
        // Параметры карты.
        {
            // Географические координаты центра отображаемой карты.
            center: [55.76, 37.64],
            // Масштаб.
            zoom: 10,
            // Тип покрытия карты: "Спутник".
            type: "yandex#satellite",
        },
        {
            // Поиск по организациям.
            searchControlProvider: "yandex#search",
        }
    );
}

function setCenter() {
    myMap.setCenter([57.767265, 40.925358]);
}

function setBounds() {
    // Bounds - границы видимой области карты.
    // Задаются в географических координатах самой юго-восточной и самой северо-западной точек видимой области.
    myMap.setBounds([
        [37, 38],
        [39, 40],
    ]);
}

function setTypeAndPan() {
    // Меняем тип карты на "Гибрид".
    myMap.setType("yandex#hybrid");
    // Плавное перемещение центра карты в точку с новыми координатами.
    myMap.panTo([62.915, 34.461], {
        // Задержка между перемещениями.
        delay: 1500,
    });
}