Справочники, инструменты, документация

Яндекс.Карты API (Yandex.Maps API)

Базовое использование Яндекс карт, примеры, создание собственных карт с использованием API.

Подключение API, создание контейнера для карты

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Подключаем API -->
 <!-- Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/load-docpage/ -->
 <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>

<!-- Создаём контейнер для карты -->
<div id="map" style="width: 600px; height: 400px"></div>

<!-- Создаём карту -->
<script type="text/javascript">
 // Функция ymaps.ready() будет вызвана, когда
 // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
 ymaps.ready(init);

 function init() {
  // Создание карты.
  // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
  var myMap = new ymaps.Map("map", {
   // Координаты центра карты.
   // Порядок по умолчнию: «широта, долгота».
   center: [55.76, 37.64],
   // Уровень масштабирования. Допустимые значения:
   // от 0 (весь мир) до 19.
   zoom: 12,
   // Элементы управления
   // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
   controls: [

    'zoomControl', // Ползунок масштаба
    'rulerControl', // Линейка
    'routeButtonControl', // Панель маршрутизации
    'trafficControl', // Пробки
    'typeSelector', // Переключатель слоев карты
    'fullscreenControl', // Полноэкранный режим

    // Поисковая строка
    new ymaps.control.SearchControl({
     options: {
      // вид - поисковая строка
      size: 'large',
      // Включим возможность искать не только топонимы, но и организации.
      provider: 'yandex#search'
     }
    })

   ]
  });

  // Добавление метки
  // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
  var myPlacemark = new ymaps.Placemark([55.76, 37.64], {
   // Хинт показывается при наведении мышкой на иконку метки.
   hintContent: 'Содержимое всплывающей подсказки',
   // Балун откроется при клике по метке.
   balloonContent: 'Содержимое балуна'
  });

  // После того как метка была создана, добавляем её на карту.
  myMap.geoObjects.add(myPlacemark);

 }
</script>
</body>
</html>

Добавление метки по адресу с использованием геокодера

ymaps.ready(init);
function init() {

 // Создание карты.
 var myMap = new ymaps.Map("map", {
  center: [56, 37],
  zoom: 12,
 });

 // Строка с адресом, который необходимо геокодировать
 var address = 'Москва, ул. Льва Толстого, 16';

 // Ищем координаты указанного адреса
 // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode-docpage/
 var geocoder = ymaps.geocode(address);

 // После того, как поиск вернул результат, вызывается callback-функция
 geocoder.then(
  function (res) {

   // координаты объекта
   var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

   // Добавление метки (Placemark) на карту
   var placemark = new ymaps.Placemark(
    coordinates, {
     'hintContent': address,
     'balloonContent': 'Время работы: Пн-Пт, с 9 до 20'
    }, {
     'preset': 'islands#redDotIcon'
    }
   );

   myMap.geoObjects.add(placemark);
  }
 );

}

Стилизация меток

ymaps.ready(init);
function init() {

 var myMap = new ymaps.Map("map", {
  center: [56, 37],
  zoom: 8,
 });

 // Все виды меток
 // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/

 // Метка без содержимого с точкой в центре
 var placemark1 = new ymaps.Placemark([55.85616623021352, 36.66577266479298], {
  hintContent: 'Метка 1',
 }, {
  'preset': 'islands#nightDotIcon'
 });

 myMap.geoObjects.add(placemark1);

 // Метка в виде круга с точкой в центре
 var placemark2 = new ymaps.Placemark([55.843805428478326, 37.03381465698029], {
  hintContent: 'Метка 2',
 }, {
  'preset': 'islands#greenCircleDotIcon'
 });

 myMap.geoObjects.add(placemark2);

 // Метка с текстом
 var placemark3 = new ymaps.Placemark([55.85616623000242, 37.429322469480205], {
  hintContent: 'Метка 3',
  iconContent: 'Метка 3'
 }, {
  'preset': 'islands#yellowStretchyIcon'
 });

 myMap.geoObjects.add(placemark3);

 // Собственное изображение для метки с контентом
 var placemark4 = new ymaps.Placemark([55.79741725173239, 37.775391805417016], {
  hintContent: 'Собственный значок метки с контентом',
 }, {
  // Опции.

  // Необходимо указать данный тип макета.
  iconLayout: 'default#image',

  // Своё изображение иконки метки.
  iconImageHref: '//codd-wd.ru/wp-content/examples/pic/web-app-development-q32.png',
  // Размеры метки.
  iconImageSize: [32, 32],
  // Смещение левого верхнего угла иконки относительно
  // её "ножки" (точки привязки).
  iconImageOffset: [-16, -16],
 });

 myMap.geoObjects.add(placemark4);
}

Масштабирование карты так, чтобы было видно все объекты

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){
 if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
});

Добавление и переключение нескольких коллекций меток

<div id="cityShop">
 <label for="cities">Город</label>:
 <select name="cities" id="cities"></select>
 <ul id="shops"></ul>
</div>

<div id="map" style="width: 100%; height: 300px"></div>
var myMap;
var placemarkCollections = {};
var placemarkList = {};

// Список городов и магазинов в них
var shopList = [
 {
  'cityName': 'Москва',
  'shops': [
   {'coordinates': [55.72532368326033, 37.748675112058876], 'name': 'Рязанский проспект, 6Ас21'},
   {'coordinates': [55.701677873469, 37.57358050756649], 'name': 'Ленинский проспект, 47с2'}
  ]
 },
 {
  'cityName': 'Санкт-Петербург',
  'shops': [
   {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
   {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}
  ]
 }
];

ymaps.ready(init);

function init() {

 // Создаем карту
 myMap = new ymaps.Map("map", {
  center: [56, 37],
  zoom: 8,
  controls: [
   'zoomControl'
  ],
  zoomMargin: [20]
 });

 for (var i = 0; i < shopList.length; i++) {

  // Добавляем название города в выпадающий список
  $('select#cities').append('<option value="' + i + '">' + shopList[i].cityName + '</option>');

  // Создаём коллекцию меток для города
  var cityCollection = new ymaps.GeoObjectCollection();

  for (var c = 0; c < shopList[i].shops.length; c++) {
   var shopInfo = shopList[i].shops[c];

   var shopPlacemark = new ymaps.Placemark(
    shopInfo.coordinates,
    {
     hintContent: shopInfo.name,
     balloonContent: shopInfo.name
    }
   );

   if (!placemarkList[i]) placemarkList[i] = {};
   placemarkList[i][c] = shopPlacemark;

   // Добавляем метку в коллекцию
   cityCollection.add(shopPlacemark);

  }

  placemarkCollections[i] = cityCollection;

  // Добавляем коллекцию на карту
  myMap.geoObjects.add(cityCollection);

 }

 $('select#cities').trigger('change');
}


// Переключение города
$(document).on('change', $('select#city'), function () {
 var cityId = $('select#cities').val();

 // Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города
 myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){
  if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
 });

 $('#shops').html('');
 for (var c = 0; c < shopList[cityId].shops.length; c++) {
  $('#shops').append('<li value="' + c + '">' + shopList[cityId].shops[c].name + '</li>');
 }

});

// Клик на адрес
$(document).on('click', '#shops li', function () {

 var cityId = $('select#cities').val();
 var shopId = $(this).val();

 placemarkList[cityId][shopId].events.fire('click');
});

Определение местоположения пользователя

<span id="aw">Адрес: <span id="address"></span></span>
<div id="map" style="width: 100%; height: 400px"></div>
ymaps.ready(init);
function init() {

 var myMap = new ymaps.Map("map", {
  center: [56, 37],
  zoom: 8
 });

 var geolocation = ymaps.geolocation;

 geolocation.get({
  // Выставляем опцию для определения положения по ip
  provider: 'yandex',
  // Карта автоматически отцентрируется по положению пользователя.
  mapStateAutoApply: true,
  // Включим автоматическое геокодирование результата.
  autoReverseGeocode: true
 }).then(function (result) {

  // Выведем результат геокодирования.
  myMap.geoObjects.add(result.geoObjects);

  var address = result.geoObjects.get(0).properties.get('text');
  document.getElementById('address').innerText = address;

  // Выведем в консоль результат геокодирования.
  console.log(result.geoObjects.get(0).properties.get('metaDataProperty'));

 });
}

Как изменить цветовую палитру Яндекс.Карты

/* Делаем карту чёрно-белой */
#map {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix
  type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
 -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

Как получить координаты объекта на PHP

// В бесплатной версии API Яндекс.Карт есть ограничение на 25000 запросов в сутки к геокодеру
// Подробнее https://tech.yandex.ru/maps/doc/enterprise/concepts/about-enterprise-docpage/

// Адрес, координаты которого необходимо получить
$address = 'Россия, Москва, Тверская 6с1';

// Отправляем запрос к геокодеру
if ( ! $geocode = @file_get_contents( 'http://geocode-maps.yandex.ru/1.x/?geocode=' . urlencode( $address ) ) ) {
    $error = error_get_last();
    throw new Exception( 'HTTP request failed. Error: ' . $error['message'] );
}

$xml = new SimpleXMLElement( $geocode );

$xml->registerXPathNamespace( 'ymaps', 'http://maps.yandex.ru/ymaps/1.x' );
$xml->registerXPathNamespace( 'gml', 'http://www.opengis.net/gml' );

$result = $xml->xpath( '/ymaps:ymaps/ymaps:GeoObjectCollection/gml:featureMember/ymaps:GeoObject/gml:Point/gml:pos' );

if ( isset( $result[0] ) ) {

    list( $longitude, $latitude ) = explode( ' ', $result[0] );

    echo $latitude; // Широта
    echo $longitude; // Долгота
}

Также можно использовать PHP API для работы с сервисом Яндекс.Геокодирование

Как отключить scrollZoom на Яндекс.Карте

ymaps.ready(init);

function init(){
 var myMap = new ymaps.Map("map", {
  center: [55.76, 37.64],
  zoom: 12
 });

 // Отключаем scrollZoom
 // Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.behavior.Manager-docpage/#map.behavior.Manager__param-behaviors
 myMap.behaviors.disable('scrollZoom');

}

Как удалить все элементы управления на Яндекс.Карте

ymaps.ready(init);

function init(){
 var myMap = new ymaps.Map("map", {
  center: [55.76, 37.64],
  zoom: 12,
  controls: [] // Убираем все элементы управления
 });
}
<label for="address">Адрес: <input type="text" id="address" style="width: 500px;"> </label>
// Выпадающая панель с поисковыми подсказками
// https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/SuggestView-docpage/
var suggestView = new ymaps.SuggestView(
 'address', // ID input'а
 {
  offset: [-2, 3], // Отступы панели подсказок от её положения по умолчанию. Задаётся в виде смещений по горизонтали и вертикали относительно левого нижнего угла элемента input.
  width: 300, // Ширина панели подсказок
  results: 3, // Максимальное количество показываемых подсказок.
 });

Работа с полигонами в Yandex.Maps

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Подключаем API -->
 <!-- Подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/load-docpage/ -->
 <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
 <!-- Подключаем jQuery -->
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <!-- https://github.com/yandex/mapsapi-area -->
 <script src="https://yastatic.net/s3/mapsapi-jslibs/area/0.0.1/util.calculateArea.min.js" type="text/javascript"></script>
</head>
<body>


<button id="startDrawing">Включить режим редактирования</button>
<button id="stopDrawing">Отключить режим редактирования</button>
<br>
<button id="calculateArea">Определить площадь полигона</button>

<!-- Создаём контейнер для карты -->
<div id="map" style="width: 100%; height: 300px"></div>
</body>
</html>
// Функция ymaps.ready() будет вызвана, когда
// загрузятся все компоненты API, а также когда будет готово DOM-дерево.
ymaps.ready(init);

function init() {
 // Создание карты.
 // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
 var myMap = new ymaps.Map("map", {
  // Координаты центра карты.
  // Порядок по умолчнию: «широта, долгота».
  center: [55.76, 37.64],
  // Уровень масштабирования. Допустимые значения:
  // от 0 (весь мир) до 19.
  zoom: 12,
  // Элементы управления
  // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
  controls: [
   'zoomControl', // Ползунок масштаба
  ]
 });

 // Добавление метки
 // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
 var myPlacemark = new ymaps.Placemark([55.76, 37.64], {}, {
  'preset': 'islands#greenCircleDotIcon'
 });

 // После того как метка была создана, добавляем её на карту.
 myMap.geoObjects.add(myPlacemark);

 /**
  * Рисуем квадратый полигон шириной 5000 метров с центром в месте установки метки
  ***************************************************************
  */
 // Определяем координаты вершин ломаных, определяющих внешнюю и внутренние границы многоугольника
 var width05 = 5000 / 2;

 var startPoint = myPlacemark.geometry.getCoordinates(),

  // ymaps.coordSystem.geo.solveDirectProblem - решает первую (прямую) геодезическую задачу:
  // где мы окажемся, если выйдем из указанной точки в указанном направлении и пройдём, не сворачивая, указанное расстояние.
  // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ICoordSystem-docpage/#method_detail__solveDirectProblem

  // Вверх от центра на 250 метров
  azimuthT = 1.570796, //вверх
  directionT = [Math.sin(azimuthT), Math.cos(azimuthT)],
  topPoint = ymaps.coordSystem.geo.solveDirectProblem(startPoint, directionT, width05).endPoint,

  // Влево на 250 метров (координаты левой верхней вершины)
  azimuthTL = 3.141593, // влево
  directionTL = [Math.sin(azimuthTL), Math.cos(azimuthTL)],
  topLeftPoint = ymaps.coordSystem.geo.solveDirectProblem(topPoint, directionTL, width05).endPoint,

  // Вправо на 250 метров (координаты правой верхней вершины)
  azimuthTR = 0, // вправо
  directionTR = [Math.sin(azimuthTR), Math.cos(azimuthTR)],
  topRightPoint = ymaps.coordSystem.geo.solveDirectProblem(topPoint, directionTR, width05).endPoint,

  // Вниз от центра на 250 метров
  azimuthB = -1.570796, // вниз
  directionB = [Math.sin(azimuthB), Math.cos(azimuthB)],
  bottomPoint = ymaps.coordSystem.geo.solveDirectProblem(startPoint, directionB, width05).endPoint,

  // Влево на 250 метров (координаты левой нижней вершины)
  azimuthBL = 3.141593, // влево
  directionBL = [Math.sin(azimuthBL), Math.cos(azimuthBL)],
  bottomLeftPoint = ymaps.coordSystem.geo.solveDirectProblem(bottomPoint, directionBL, width05).endPoint,

  // Вправо на 250 метров (координаты правой нижней вершины)
  azimuthBR = 0, // вправо
  directionBR = [Math.sin(azimuthBR), Math.cos(azimuthBR)],
  bottomRightPoint = ymaps.coordSystem.geo.solveDirectProblem(bottomPoint, directionBR, width05).endPoint;


 // Рисуем полигон
 // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Polygon-docpage/
 var myPolygon = new ymaps.Polygon([
  // Координаты внешнего контура
  [
   topLeftPoint,
   topRightPoint,
   bottomRightPoint,
   bottomLeftPoint,
   topLeftPoint,
  ],
  [] // Координаты внутреннего контура
 ], {}, {
  // Курсор в режиме добавления новых вершин.
  editorDrawingCursor: "crosshair",
  // Максимально допустимое количество вершин.
  editorMaxPoints: 10,
  fill: true, // Наличие заливки
  fillColor: '0066ff99', // Цвет заливки.
  strokeColor: '0000FF', // Цвет обводки.
  strokeWidth: 5, // Ширина обводки.

  // Убираем возможность добавлять внутренний контур в режиме редактирования
  editorMenuManager: function (t) {
   return t.filter(function (t) {
    return "addInterior" !== t.id
   });
  }
 });

 myMap.geoObjects.add(myPolygon);

 // Включаем режим редактирования полигона
 $('#startDrawing').on('click', function () {
  myPolygon.editor.startDrawing();
 });

 // Отключаем режим редактирования полигона
 $('#stopDrawing').on('click', function () {
  myPolygon.editor.stopDrawing();
  myPolygon.editor.stopEditing();
 });

 // Определяем площадь полигона
 // Для расчета площади используется модуль mapsapi-area
 // https://github.com/yandex/mapsapi-area
 ymaps.ready(['util.calculateArea']).then(function () {

  $('#calculateArea').on('click', function() {

   // Вычисляем площадь геообъекта.
   var area = Math.round(ymaps.util.calculateArea(myPolygon));

   // Если площадь превышает 1 000 000 м², то приводим ее к км².
   if (area <= 1e6) {
    area += ' м²';
   } else {
    area = (area / 1e6).toFixed(3) + ' км²';
   }

   alert('Площадь полигона ' + area);
  });

 });
}
На этой странице