[Примеры] Яндекс.Карты API (Yandex.Maps API)
Документация по JS API | Песочница
Содержание:
- Подключение API, создание контейнера для карты и создание карты
- Добавление метки по адресу с использованием геокодера
- Стилизация меток
- Масштабирование карты так, чтобы было видно все объекты
- Добавление и переключение нескольких коллекций меток
- Определение местоположения пользователя
- Как изменить цветовую палитру Яндекс.Карты
- Как получить координаты объекта на PHP
- Как отключить scrollZoom на Яндекс.Карте
- Как удалить все элементы управления на Яндекс.Карте
1. Подключение API, создание контейнера для карты и создание карты
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!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> |
2. Добавление метки по адресу с использованием геокодера
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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); } ); } |
3. Стилизация меток
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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); } |
4. Масштабирование карты так, чтобы было видно все объекты
1 2 3 |
myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){ if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15. }); |
5. Добавление и переключение нескольких коллекций меток
1 2 3 4 5 6 7 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
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'); }); |
6. Определение местоположения пользователя
1 2 |
<span id="aw">Адрес: <span id="address"></span></span> <div id="map" style="width: 100%; height: 400px"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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')); }); } |
7. Как изменить цветовую палитру Яндекс.Карты
1 2 3 4 5 |
/* Делаем карту чёрно-белой */ #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+ */ } |
8. Как получить координаты объекта на PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// В бесплатной версии 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 для работы с сервисом Яндекс.Геокодирование
9. Как отключить scrollZoom на Яндекс.Карте
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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'); } |
10. Как удалить все элементы управления на Яндекс.Карте
1 2 3 4 5 6 7 8 9 |
ymaps.ready(init); function init(){ var myMap = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 12, controls: [] // Убираем все элементы управления }); } |