--- metadata: - name: generator content: Diplodoc Platform v5.37.1 alternate: - https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/jsapi-v1-1/doc/ru/llms.txt # Работа с картой - [Как разместить несколько карт на одной странице](https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md#how-to-add-multiple-maps) - [Как показать карту по требованию](https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md#how-to-load-hidden-map) - [Как показать карту из скрытого контейнера](https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md#how-to-load-map-in-hidden-div) - [Как использовать плавное перемещение карты](https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md#how-to-use-smooth-panning) - [Как создать ссылку на фрагмент карты](https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md#how-to-create-link-to-map-fragments) ## Как разместить несколько карт на одной странице {#how-to-add-multiple-maps} На одной странице можно разместить неограниченное количество экземпляров карт. Для того чтобы добавить на страницу более одной карты, выполните следующие шаги: 1. Cоздайте html-контейнер для каждого экземпляра карты. {% note info %} Для того, чтобы затем обращаться к контейнерам по `id`, контейнеры должны иметь уникальные идентификаторы. {% endnote %} Например, для размещения на одной странице карт Москвы и Санкт-Петербурга, создайте два контейнера с уникальными `id`: ```

Москва

Санкт-Петербург

``` 1. Создайте объект [YMaps.Map](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md) для каждого экземпляра карты и присвойте каждый объект переменной с уникальным именем. {% note info %} Имена переменных, также как и `id` контейнеров, в которых размещаются карты, должны быть уникальными. {% endnote %} Например, присвойте переменной `mapMsc` объект карты Москвы, а `mapSpb` — Санкт-Петербурга: ``` // Создает объект карты Москвы var mapMsc = new YMaps.Map(YMaps.jQuery("#ymaps-msc")[0]); // Создает объект карты Санкт-Петербурга var mapSpb = new YMaps.Map(YMaps.jQuery("#ymaps-spb")[0]); ``` 1. Задайте начальные параметры отображения для каждой созданной карты. Например, для карты Москвы установите центр на Красной площади, а для Санкт-Петербурга — на Дворцовой. Уровень масштаба задайте равным 10: ``` // Инициализирует карту Москвы mapMsc.setCenter(new YMaps.GeoPoint(37.609,55.753), 10); // Инициализирует карту Санкт-Петербурга mapSpb.setCenter(new YMaps.GeoPoint(30.313,59.938), 10); ``` [Открыть пример в новом окне](https://yandex.github.io/mapsapi-examples-old/html/severalmaps.html) ## Как показать карту по требованию {#how-to-load-hidden-map} Если требуется показать карту, когда пользователь щелкнет по ссылке (или другому DOM-объекту), применяйте метод загрузки API [по требованию](https://yandex.ru/dev/jsapi-v1-1/doc/ru/dg/tasks/api-loading.md). Начальные параметры отображения карты выставьте после того, как контейнер карты станет видимым. Выполните следующие шаги: 1. Добавьте на HTML-страницу ссылку, по которой будет вызываться функция инициализации и показа карты, например, `showMap()`: ``` Показать карту ``` 1. Реализуйте внутри функции загрузку API по требованию, инициализацию и показ карты, например: ``` function showMap () { YMaps.load(function() { var mapContainer = YMaps.jQuery("#YMapsID"), map = new YMaps.Map(mapContainer[0]); mapContainer.css("display", ""); map.setCenter(new YMaps.GeoPoint(37.64, 55.76)); }); } ``` [Открыть пример в новом окне](https://yandex.github.io/mapsapi-examples-old/html/showhiddenmap.html) ## Как показать карту из скрытого контейнера {#how-to-load-map-in-hidden-div} Если невозможно использовать метод отображения карты [по требованию](https://yandex.ru/dev/jsapi-v1-1/doc/ru/articles/tasks/map.md), задайте начальные параметры отображения карты в скрытом HTML-элементе. Для этого выполните следующие шаги: 1. Добавьте на страницу элемент управления (например, ссылку, кнопку, изображение), при щелчке по которому будет отображаться элемент-контейнер для карты и сама карта. Например, создайте ссылку "Показать/Скрыть карту", при щелчке на которой будет отображаться/скрываться карта Москвы: ``` Показать/Скрыть карту ``` 1. Создайте экземпляр карты и задайте начальные параметры ее отображения. Например, создайте экземпляр карты Москвы с центром на Красной площади: ``` var container = YMaps.jQuery("#YMapsID"), map = new YMaps.Map(container[0]); map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10); ``` 1. Создайте обработчик события щелчка мыши по ссылке, который будет скрывать/показывать контейнер карты. Прикрепите обработчик к созданному ранее элементу управления. ``` // Показывает/скрывает контейнер карты по щелчку по ссылке "Показать/Скрыть карту" YMaps.jQuery("#change-map-visibility").bind('click', function () { container.css('display', (container.css('display') == 'none') ? '' : 'none'); map.redraw(); // Перерисовывает карту return false; }); ``` {% note info %} Перерисовка карты с помощью метода [redraw()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#redraw) требуется для того, чтобы избежать возможной "потери" тайлов. {% endnote %} [Открыть пример в новом окне](https://yandex.github.io/mapsapi-examples-old/html/showhiddenmap2.html) ## Как использовать плавное перемещение карты {#how-to-use-smooth-panning} Для плавного перемещения центра карты в заданную географическую точку используйте метод карты [panTo()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#panTo). Если расстояние между текущим центром карты и заданной точкой превосходит размер карты более чем в три раза, метод [panTo()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#panTo) работает как [setCenter()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#setCenter). Если установлена опция `flying`, то перемещение карты имитирует перелет из одной точки в другую. Пример ниже демонстрирует, как использовать метод [panTo()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#panTo) для просмотра нескольких городов. 1. Создайте контейнеры для карты и списка городов. Список городов формируется динамически с помощью JavaScript. ```
``` 1. Создайте список городов с привязкой к географическим координатами. По щелчку на элементе списка карта будет плавно перемещаться в центр выбранного города. Список городов и их координат представлен в виде JavaScript-объекта: ``` var destinations = { 'Москва' : new YMaps.GeoPoint(37.609218,55.753559), 'Санкт-Петербург' : new YMaps.GeoPoint(30.313497,59.938531), 'Екатеринбург' : new YMaps.GeoPoint(60.617435,56.829748), 'Одесса' : new YMaps.GeoPoint(30.7058,46.466444) }; // Устанавливает центр карты на первом городе из списка map.setCenter(destinations['Москва'], 10); ``` 1. Создает список городов и записывает его в контейнер с идентификатором `mapMenu` Список ссылок формируется исходя из объекта `destinations`. К каждой ссылке прикрепляется обработчик щелчка мыши, в котором с помощью метода [panTo()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#panTo) производится изменение координат центра карты. ``` var menuContainer = YMaps.jQuery('#mapMenu'); // Создает список городов for (var item in destinations) { // Использует замыкание, чтобы работать с конкретным свойством объекта (function (title, geoPoint) { // Создает ссылку, обернутую в тег

для лучшей читаемости YMaps.jQuery("

  • " + item + "
    • ") .find('a') // По щелчку на ссылке создает обработчик .bind('click', function () { // Подчеркивает все ссылки menuContainer.find('a').css('text-decoration', 'underline'); // Кроме той, что была выбрана пользователем YMaps.jQuery(this).css('text-decoration', 'none'); // Перемещает карту map.panTo(geoPoint, {flying: 1}); return false; }) .end() // Записывает созданный элемент списка в список .appendTo(menuContainer); })(item, destinations[item]) } ``` [Открыть пример в новом окне](https://yandex.github.io/mapsapi-examples-old/html/mappanto.html) ## Как создать ссылку на фрагмент карты {#how-to-create-link-to-map-fragments} В примере показано как сформировать HTML-ссылку на фрагмент карты. Подобные ссылки можно использовать, например, для организации обмена ссылками на объекты карты между пользователями картографического приложения. Пример добавляет к URL страницы в адресной строке браузера параметры, задающие текущее положение центра карты, ее тип и область показа. Полученный адрес можно отправить другим пользователям для того, чтобы они смогли увидеть тот же самый фрагмент карты. Для изменения HTTP-адреса страницы в браузере средствами JavaScript используется глобальный объект браузера `document.location`, который содержит информацию об адресе текущей загруженной страницы (свойство `document.location.href`). Адрес текущего фрагмента карты сохраняется в атрибуте `href` HTML-элемента \ («ссылка»). Код для создания ссылки выглядит следующим образом: ``` Получить ссылку на карту ``` Чтобы сформировать адрес фрагмента карты в ссылке потребуется сохранять кординаты центра карты, линейный размер видимой области и тип карты. 1. Создайте класс для перевода типа карты в строковое представление и обратно (`TypeConverter`). Для перевода остальных параметров используйте стандартные методы `toString()` и `fromString()` ``` // Преобразует тип карты в строковое представление и обратно // Если тип карты не был определен, то по умолчанию возвращается тип карты YMaps.MapType.MAP (или имя "map") function TypeConverter () { // Типы карты var types = [YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID], // Имена карт names = ["map", "sat", "hyb"]; // Возвращает имя карты по ее типу this.typeToName = function (type) { return names[valid(types.indexOf(type))]; }; // Возвращает тип карты по имени this.nameToType = function (name) { return types[valid(names.indexOf(name))]; }; // Проверяет правильность полученного индекса function valid (index) { return (index == -1) ? 0 : index; } }; ``` 1. Создайте и подключите обработчик событий карты [BoundsChange](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#event-BoundsChange) и [TypeChange](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#event-TypeChange), в которых будет формироваться адрес ссылки на фрагмент карты. ``` // Динамически формирует URL ссылки YMaps.Events.observe(map, [map.Events.BoundsChange, map.Events.TypeChange], function () { YMaps.jQuery("#YMapsLink") .attr("href", "?l=" + typeConverter.typeToName(map.getType()) + "&ll=" + map.getCenter().toString() + "&spn=" + map.getBounds().getSpan().toString(6) ); }); ``` Итоговая ссылка будет иметь следующий вид: ``` ?l=hyb&ll=37.664725,55.842762&spn=0.823971,0.309084 ``` 1. Создайте вспомогательную функцию, которая будет по имени параметра возвращать его значение. ``` // Возвращает значение параметра URL по его имени function getParam (name, location) { location = location || window.location.hash; var res = location.match(new RegExp('[#&]' + name + '=([^&]*)', 'i')); return (res && res[1] ? res[1] : ''); } ``` 1. Создайте объект, который будет содержать все параметры, обнаруженные в сформированном URL. ``` // Объект, содержащий URL-параметры var params = { ll : getParam("ll"), // Центр карты spn : getParam("spn"), // Линейный размер области t : getParam("t") // Тип карты }; ``` 1. Отобразите заданную область на карте. Для этого передайте в метод карты [setBounds()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/map.md#setBounds) объект класса [YMaps.GeoBounds](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/geobounds.md). С помощью метода [fromCenterAndSpan()](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/geobounds.md#.fromCenterAndSpan) создайте область по значениям центра карты и линейному размеру области в градусах. Объекты классов [YMaps.GeoPoint](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/geopoint.md) и [YMaps.Size](https://yandex.ru/dev/jsapi-v1-1/doc/ru/ref/reference/size.md) создайте из строкового представления с помощью метода `fromString()`: ``` // Область карты, которую необходимо показать var bounds = YMaps.GeoBounds.fromCenterAndSpan( YMaps.GeoPoint.fromString(params.ll), // Центр карты YMaps.Size.fromString(params.spn) // Линейный размер области в градусах ); ``` 1. Переведите тип карты из строкового вида в объект с помощью вспомогательного класса `TypeConverter`: ``` // Устанавливает требуемый тип карты map.setType(typeConverter.nameToType(params.l)); ``` [Открыть пример в новом окне](https://yandex.github.io/mapsapi-examples-old/html/mapeventscreatelink.html) Кроме описанного выше способа параметры карты можно сохранить в ссылке-якоре. Преимущество этого способа в том, что такие ссылки можно формировать и отображать динамически без перезагрузки страницы. [Открыть пример в новом окне](https://yandex.github.io/mapsapi-examples-old/html/mapeventscreatelinkhash.html)