API Яндекс.Карт с нуля. Урок 3. Центр и масштаб

В прошлом уроке мы научились менять размер карты на веб-странице. Если вы это освоили, то задать для карты центр и масштаб будет легко. Возможно, вы уже поняли как. Если нет, то сейчас расскажу.

В этот раз я не буду напоминать, куда нужно писать код и как смотреть на результат. Если не знаете, повторите предыдущие уроки.

Центр карты и масштаб

Действия будут похожи на те, что мы выполняли в прошлом уроке. Но глубинная разница есть: тогда мы правили свойства html-элемента, который содержит карту, а сегодня изменим JavaScript-код, который заключён внутрь тега <script>.

Даже без знания JavaScript по небольшому коду можно догадаться, что он создаёт новую карту (new ymaps.Map), чьи параметры перечислены в фигурных скобках. Сейчас это только центр и масштаб, но можно указать и другие, скоро мы это сделаем.

Перенесём нашу карту в Санкт-Петербург и сделаем покрупнее. Запишем для ключа center значение [59.94, 30.33], а для zoom — 14.

На нашей карте работает переключение слоёв, вот так город выглядит со спутника
На нашей карте работает переключение слоёв, вот так город выглядит со спутника

Теперь вы можете создать карту любого места на Земле и выбрать для неё подходящий масштаб. Обязательно поэкспериментируйте с этими параметрами.

В заключение

Как обычно, вот пример из этого урока на CodePen, чтобы попробовать онлайн. И файлом, чтобы сохранить к себе.

Код всё ещё очень компактный, веб-страница умещается в 20 строк. Скоро мы это исправим
Код всё ещё очень компактный, веб-страница умещается в 20 строк. Скоро мы это исправим

Спасибо за внимание. Ставьте пальцы вверх, подписывайтесь на канал (наверху) и на телеграм, мы подходим к самым интересным темам. Присылайте работы и вопросы на почту: webmax17@yandex.ru. До скорого!