Поиск по сайту

API
Главная / API - Терминалы на карте

Терминалы на карте

Обновлено 09.08.2017
588 кб

Для получения списка терминалов с координатами необходимо сделать запрос к API. Описание запроса и список возвращаемых параметров содержится на странице "Терминалы". В получившемся ответе необходимо использовать параметры "latitude" (широта) и "longitude" (долгота), которые будут использоваться для задания координат точки на карте. Обратите внимание, что координаты терминалов используются для нахождения точки местоположения, а координаты городов используются для установки центра карты при отображении всех терминалов города. Масштаб карты Вы можете выбрать, исходя из размеров Вашей карты.

Отображение терминалов на Яндекс.Карты

Описание возможностей API Яндекс.Карты находится по адресу http://api.yandex.ru/maps/. Основные моменты и параметры подключения для работы с сервисом Яндекса Вы найдете в документации. Мы остановимся лишь на конкретном использовании данных терминалов на примере API Яндекс.Карты версии 2.1.

Интересующие нас данные из API Деловые Линии в JSON (возможно получение данных в XML) формате:

{  
   "city":[  
      {  
         "name":"Санкт-Петербург",
         "latitude":59.9366,
         "longitude":30.4128,
         "terminals":[  
            {  
               "name":"Санкт-Петербург-Стачек",
               "address":"пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)",
               "fullAddress":"198097, Санкт-Петербург г, Стачек пр-кт, дом № 45, корпус 2",
               "latitude":59.8873,
               "longitude":30.2596
            },
            {  
               "name":"Санкт-Петербург-Парнас",
               "address":"2-й Верхний пер., 13А",
               "fullAddress":"194292, Санкт-Петербург г, 2-й Верхний пер, дом № 13 А",
               "latitude":60.0664,
               "longitude":30.3804
            },
            {  
               "name":"Санкт-Петербург-Восток",
               "address":"ул.Латышских Стрелков, 31",
               "fullAddress":"193231, Санкт-Петербург г, Латышских Стрелков ул, дом № 31",
               "latitude":59.9348,
               "longitude":30.4492
            }
         ]
      }
   ]
}
<response>
   <city>
      <name>Санкт-Петербург</name>
      <latitude>59.9366</latitude>
      <longitude>30.4128</longitude>
      <terminals>
         <name>Санкт-Петербург-Стачек</name>
         <address>пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)</address>
         <fullAddress>198097, Санкт-Петербург г, Стачек пр-кт, дом № 45, корпус 2</fullAddress>
         <latitude>59.8873</latitude>
         <longitude>30.2596</longitude>
      </terminals>
      <terminals>
         <name>Санкт-Петербург-Парнас</name>
         <address>2-й Верхний пер., 13А</address>
         <fullAddress>194292, Санкт-Петербург г, 2-й Верхний пер, дом № 13 А</fullAddress>
         <latitude>60.0664</latitude>
         <longitude>30.3804</longitude>
      </terminals>
      <terminals>
         <name>Санкт-Петербург-Восток</name>
         <address>ул.Латышских Стрелков, 31</address>
         <fullAddress>193231, Санкт-Петербург г, Латышских Стрелков ул, дом № 31</fullAddress>
         <latitude>59.9348</latitude>
         <longitude>30.4492</longitude>
      </terminals>
   </city>
</response>

Эти данные необходимо передать для работы с JavaScript и сформировать скрипт в таком виде:

<script>
ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", { // "map" - id селектора, в который вставляется объекта карты Яндекс
            center: [59.9366, 30.4128], // [широта, долгота] центровка из данных города
            zoom: 10 // масштаб для карты, устанавливается в зависимости от размера
        });

  // Добавление точек терминалов на карту
    myMap.geoObjects
        .add(new ymaps.Placemark([59.8873, 30.2596], {
            balloonContent: '<strong>Санкт-Петербург-Стачек</strong>
пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)' // в содержимом можно вывеси простой или полный адрес
        }, {
            preset: 'islands#dotIcon', // выбор варианта метки
        }))
        .add(new ymaps.Placemark([60.0664, 30.3804], {
            balloonContent: '<strong>Санкт-Петербург-Парнас</strong>
2-й Верхний пер., 13А' // в содержимом можно вывеси простой или полный адрес
        }, {
            preset: 'islands#dotIcon', // выбор варианта метки
        }))
        .add(new ymaps.Placemark([59.9348, 30.4492], {
            balloonContent: '<strong>Санкт-Петербург-Восток</strong>
ул.Латышских Стрелков, 31' // в содержимом можно вывеси простой или полный адрес
        }, {
            preset: 'islands#dotIcon', // выбор варианта метки
        }));
} 
</script>

<div id='map'></div>

В результате должна отобразиться карта, представленная ниже:

Отображение терминалов на Google Maps

Описание возможностей API Google Maps находится по адресу https://developers.google.com/maps/. Основные моменты и параметры подключения для работы с сервисом Google Maps Вы найдете в документации. Мы остановимся лишь на конкретном использовании данных терминалов на примере API Google Maps версии 3.

Возьмем данные терминалов из API Деловые Линии аналогично разделу Яндекс.Карты. После передачи в JavaScript код будет выглядеть следующим образом:

<script>
function initialize() {
  var mapOptions = {
    zoom: 10, // масштаб для карты, устанавливается в зависимости от размера
    center: new google.maps.LatLng(59.9366,30.4128) // (широта, долгота) центровка из данных города
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions); // "map" - id селектора, в который вставляется объекта карты Яндекс

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(59.8873,30.2596), // (широта,долгота) координаты из данных терминала
      map: map, // привязка к объекту карты 'map'
      title: 'Санкт-Петербург-Стачек' // вывод названия при наведении на метку
  });

  google.maps.event.addListener(marker, 'click', function() { // создание события открытия описания при клике на метку
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Стачек</strong>
пр. Стачек, 45/2(пересечение ул. Ново-Овсянниковская и ул. Баррикадная)', // в содержимом можно вывеси простой или полный адрес
      maxWidth: 200 // максимальная ширина окна описания(не обязательно)
    }).open(map,marker);
  });

  var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(60.0664,30.3804), // (широта,долгота) координаты из данных терминала
      map: map, // привязка к объекту карты 'map'
      title: 'Санкт-Петербург-Парнас' // вывод названия при наведении на метку
  });

  google.maps.event.addListener(marker2, 'click', function() { // создание события открытия описания при клике на метку
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Парнас</strong>
2-й Верхний пер., 13А', // в содержимом можно вывеси простой или полный адрес
      maxWidth: 200 // максимальная ширина окна описания(не обязательно)
    }).open(map,marker2);
  });

  var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(59.9348,30.4492), // (широта,долгота) координаты из данных терминала
      map: map, // привязка к объекту карты 'map'
      title: 'Санкт-Петербург-Восток' // вывод названия при наведении на метку
  });

  google.maps.event.addListener(marker3, 'click', function() { // создание события открытия описания при клике на метку
    new google.maps.InfoWindow({
      content: '<strong>Санкт-Петербург-Восток</strong>
ул.Латышских Стрелков, 31', // в содержимом можно вывеси простой или полный адрес
      maxWidth: 200 // максимальная ширина окна описания(не обязательно)
    }).open(map,marker3);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id='map'></div>

В результате должна отобразиться карта, представленная ниже:

Обращаем внимание, что с обновлением API картографических сервисов некоторые параметры могут измениться. Но чаще всего более старые версии продолжают работать без гарантированной поддержки и актуальной документации.