Api yandex maps javascript api

[Примеры] Яндекс.Карты API (Yandex.Maps API)

if ( myMap . getZoom ( ) > 15 ) myMap . setZoom ( 15 ) ; // Если значение zoom превышает 15, то устанавливаем 15.

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

if ( myMap . getZoom ( ) > 15 ) myMap . setZoom ( 15 ) ; // Если значение zoom превышает 15, то устанавливаем 15.

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

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

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\’/>#grayscale» ) ; /* Firefox 3.5+ */

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

if ( ! $geocode = @ file_get_contents ( ‘http://geocode-maps.yandex.ru/1.x/?geocode=’ . urlencode ( $address ) ) )

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

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

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

11. Создание выпадающей панели с поисковыми подсказками адресов

offset : [ — 2 , 3 ] , // Отступы панели подсказок от её положения по умолчанию. Задаётся в виде смещений по горизонтали и вертикали относительно левого нижнего угла элемента input.

Если необходимо реализовать поиск и автодополнение только по базе адресов России, рекомендую использовать сервис «КЛАДР в облаке» — функционал и возможности у него шире, чем у Яндекс.Карт (примеры | jQuery плагин) либо сервис DaData.

Источник

Изучаем API Яндекс.Карт 2.0

JavaScript API Яндекс.Карт представляет собой набор JavaScript-компонентов, предназначенных для создания интерактивных карт. Компоненты размещены на серверах Яндекса и доступны для использования сразу после их загрузки на страницу.

Подключение API

src="https://api-maps.yandex.ru/2.0-stable/?apikey=YOUR_APY_KEY&load=package.full&lang=ru-RU" type="text/javascript"> 

Могут быть загружены как все компоненты API, так и отдельные пакеты, содержащие только необходимые компоненты. Это позволяет регулировать объем трафика, передаваемого клиентскому приложению.

Контейнер для карты

В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div с заданной шириной и высотой). Карта заполнит этот элемент полностью. Уникальный идентификатор (id) контейнера будет использоваться для получения указателя на контейнер карты.

id="myMap" style="width: 700px; height: 700px;"> 

Создание карты

Создавать карту следует после того, как веб-страница загрузится целиком. Это значит, что контейнер для карты создан и к нему можно обращаться по id. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().

ymaps.ready(init); function init()  var myMap = new ymaps.Map ('myMap',  center: [55.75, 37.61], zoom: 10 >); >

При инициализации карты, указав дополнительный параметр type , мы можем задать тип нашей карты:

• yandex#map — тип карты «схема» (по умолчанию);
• yandex#satellite — тип карты «спутник»;
• yandex#hybrid — тип карты «гибрид»;
• yandex#publicMap — тип карты «народная карта»;
• yandex#publicMapHybrid — тип карты «народный гибрид».

ymaps.ready(init); function init()  var myMap = new ymaps.Map ('myMap',  center: [55.75, 37.61], zoom: 10, type: 'yandex#hybrid' >); >

Добавление метки на карту

В API метки реализуются с помощью класса Placemark. Перед тем как добавить метку на карту, создайте экземпляр этого класса. При создании метки вы можете задать текст её иконки, а также текст балуна, который откроется при щелчке кнопкой мыши на этой метке.

ymaps.ready(init); function init()  var myMap = new ymaps.Map ('myMap',  center: [55.75, 37.61], zoom: 3 >); var myPlacemark = new ymaps.Placemark([55.76, 37.64],  iconContent: 'Москва', balloonContent: 'Столица России' >,  preset: 'twirl#blueStretchyIcon' >); >

После того как метка была создана, её можно добавить на карту. Добавление объектов на карту осуществляется через их добавление в глобальную коллекцию объектов карты myMap.geoObjects:

myMap.geoObjects.add(myPlacemark);

Еще один пример добавления метки:

var myPlacemark = new ymaps.Placemark([55.7, 37.6],  // Свойства iconContent: 'Щелкни по мне', balloonContentHeader: 'Заголовок', balloonContentBody: 'Содержимое  балуна ', balloonContentFooter: 'Подвал' >,  // Опции preset: 'twirl#blueStretchyIcon' // иконка растягивается под контент >);

Стандартные элементы управления

Теперь изменим код, чтобы на карте отображались стандартные элементы управления:

• Панель инструментов со стандартным набором кнопок: перетягивание карты (drag), увеличение выделенной области, измерение расстояний.
• Переключатель отображаемого типа карты.
• Изменение коэффициента масштабирования.

ymaps.ready(init); function init()  var myMap = new ymaps.Map ('myMap',  center: [55.75, 37.61], zoom: 3, type: 'yandex#satellite' >); myMap.controls .add('mapTools') // стандартные кнопки .add('typeSelector') // переключатель типа карты .add('zoomControl'); // изменение масштаба var myPlacemark = new ymaps.Placemark([55.75, 37.61],  iconContent: 'Москва', balloonContent: 'Столица России' >,  preset: 'twirl#blueStretchyIcon' >); myMap.geoObjects.add(myPlacemark); >

Можно изменить стандартное расположение элементов управления:

myMap.controls .add('mapTools', left:5, bottom:35>) // стандартные кнопки .add('typeSelector', left:5, top:5>) // переключатель типа карты .add('zoomControl', right:5, top:15>); // изменение масштаба

Добавить линейку масштаба и обзорную карту:

myMap.controls .add(new ymaps.control.ScaleLine()) // линейка масштаба .add(new ymaps.control.MiniMap( // обзорная карта заданного типа type: 'yandex#publicMap' >));

Задание собственного шаблона оформления содержимого балуна

Балун — это всплывающее окно, в котором может быть показано любое HTML-содержимое. Одновременно на карте может быть показан только один балун.

// Как только будет загружен API и готов DOM, выполняем инициализацию ymaps.ready(initTinkoMap); function initTinkoMap()  var tinkoMap = new ymaps.Map('tinkoMap',  center: [55.750, 37.607], zoom: 11 >); // Масштабирование с помощью колесика мышки tinkoMap.behaviors.enable('scrollZoom'); // Добавляем стандартные элементы управления tinkoMap.controls.add('zoomControl').add('typeSelector').add('mapTools'); // Создаем метку центрального офиса var centralOfficePlacemark = new ymaps.Placemark([55.752422, 37.77163],  // Свойства iconContent: 'Центральный', name: 'Центральный офис', address: '3-й проезд Перова поля, дом 8', phone: 'тел: (495) 708-42-13, факc: (495) 708-42-14', photo: 'src="/images/office.jpg" alt="Центральный офис" />', print: 'href="/images/print.jpg" alt="Центральный офис" target="_blank" />Версия для печати' >,  // Опции preset: 'twirl#redStretchyIcon' // иконка растягивается под контент >); // Создаем метку офиса продаж Сокол var sokolOfficePlacemark = new ymaps.Placemark([55.810463, 37.524699],  // Свойства iconContent: 'Сокол', name: 'Офис продаж Сокол', address: 'ул. Часовая, д. 24, стр. 2', phone: 'тел: (495) 708-42-13 доб. 401', photo: 'src="/images/office1.jpg" alt="Офис продаж Сокол" />', print: 'href="/images/print1.jpg" alt="Офис продаж Сокол" target="_blank" />Версия для печати' >,  // Опции preset: 'twirl#redStretchyIcon' // иконка растягивается под контент >); // Создаем метку офиса продаж Мещанский var olimpOfficePlacemark = new ymaps.Placemark([55.781294, 37.629261],  // Свойства iconContent: 'Мещанский', name: 'Офис продаж Мещанский', address: 'ул. Щепкина, д. 47', phone: 'тел: (495) 708-42-13 доб. 402', photo: 'src="/images/office2.jpg" alt="Офис продаж Мещанский" />', print: 'href="/images/print2.jpg" alt="Офис продаж Мещанский" target="_blank" />Версия для печати' >,  // Опции preset: 'twirl#redStretchyIcon' // иконка растягивается под контент >); // Создаем метку офиса продаж Нагорный var nagorOfficePlacemark = new ymaps.Placemark([55.678815, 37.603392],  // Свойства iconContent: 'Нагорный', name: 'Офис продаж Нагорный', address: 'ул. Нагорная, д. 20, корп. 1', phone: 'тел: (495) 708-42-13 доб. 403', photo: 'src="/images/office3.gif" alt="Офис продаж Нагорный" />', print: 'href="/images/print3.jpg" alt="Офис продаж Нагорный" target="_blank" />Версия для печати' >,  // Опции preset: 'twirl#redStretchyIcon' // иконка растягивается под контент >); // Создаем коллекцию, в которую будем добавлять метки var tinkoCollection = new ymaps.GeoObjectCollection(); // Добавляем метки в коллекцию геообъектов tinkoCollection .add(centralOfficePlacemark) .add(sokolOfficePlacemark) .add(olimpOfficePlacemark) .add(nagorOfficePlacemark); // Создаем шаблон для отображения контента балуна var tinkoBalloonLayout = ymaps.templateLayoutFactory.createClass( '
$[properties.name]
' + '
$[properties.address]' + '
$[properties.phone]' + '
$[properties.photo]' + '
$[properties.print]' ); // Помещаем созданный шаблон в хранилище шаблонов. // Теперь наш шаблон доступен по ключу 'tinko#officeslayout' ymaps.layout.storage.add('tinko#officeslayout', tinkoBalloonLayout); // Задаем наш шаблон для балунов геобъектов коллекции tinkoCollection.options.set( balloonContentBodyLayout:'tinko#officeslayout', // Максимальная ширина балуна в пикселах balloonMaxWidth: 350 >); // Добавляем коллекцию геообъектов на карту tinkoMap.geoObjects.add(tinkoCollection); >

Рисуем многоугольник

ymaps.ready(init); function init ()  var myMap = new ymaps.Map ('myMap',  center: [55.75, 37.61], zoom: 10 >); // создаем многоугольник var myPolygon = new ymaps.Polygon([[ // координаты вершин внешней границы многоугольника [55.778607,37.553126], [55.792923,37.647883], [55.724391,37.709681], [55.708887,37.583339] ]]); myMap.geoObjects.add(myPolygon); >

Дополнительно:

Источник

«Яндекс Карты» выпустили обновлённое JS API с расширенным дизайном карт

«Яндекс Карты» представили JavaScript API 3.0, позволяющее встраивать интерактивные карты в веб-приложения. Теперь разработчики могут менять дизайн карт и использовать TypeScript.

JavaScript API 3.0 теперь предоставляет векторные карты вместо растровых, что позволяет менять дизайн и адаптировать его под брендинг компаний. Можно менять цвета, размер зданий и количество отображаемой информации. Компания рассказала, что широкие возможности кастомизации помогут бизнесу адаптировать карты под нужды клиентов.

JavaScript API 3.0 содержит самые популярные опции, которые нужны тем, кто использует интерактивные карты на своих сайтах. И если бизнес захочет перейти на него — мы готовы подсказать, как всё настроить. При этом мы продолжим поддерживать более ранние версии JavaScript API, так что все наши карты в любом случае будут работать стабильно, даже если обновятся браузеры. Но новые функции мы планируем добавлять только в версию 3.0.

Александр Тармолов, руководитель отдела разработки веб-приложений «Яндекс Карт»

Также JS API 3.0 работает быстрее, чем JS API 2.1. Это позволяет страницам веб-сайтов быстрее загружаться и доносить информацию до пользователей. Высокая скорость загрузки также поможет тем, кто размещает на картах много информации и меток.

В API 3.0 появилась поддержка языка программирования TypeScript. Встроенные подсказки помогут разработчикам писать код, не заглядывая в инструкции, что поможет сэкономить время. Также обновлённый API снабжён обёрткой для фреймворка React.

В начале ноября 2022 года «Яндекс» улучшила поиск в «Картах» с помощью машинного обучения. Теперь сервис может анализировать сложные запросы и находить организации без дополнительных фильтров.

Источник