JavaScript: Подсчет расстояния между двумя точками (Yandex Map)

Все привет. Давно не доходили руки написать что-нибудь интересное. И вот наконец я нашел немного времени и теперь хочу рассказать Вам о том как подсчитать расстояние между двумя точками (например городами) используя Яндекс Карты…

Первое что Вам нужно сделать, это подключить API Яндекс Карт на свою страницу. На момент написания статьи актуальная версия 2.1ю Строчка подключения выглядит следующим образом:

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Далее на странице нужно добавить контейнер для карты. Например:

<div id="map" style="width:100%; height:150px"></div>

Для создания карты пишем следующие строчки:

<script type="text/javascript">
var map;
ymaps.ready(function(){
    var mapDivId = 'map'; //Id контейнера для карты 
    var mapCenter = [55.76, 37.64]; //Координата центра карты по умолчанию
    map = new ymaps.Map(mapDivId , { center: mapCenter, zoom: 10 });
});
</script>

Стоит отметить, что отображение карты мы можем скрыть (прописав стиль display: none). Однако саму карту создать необходимо.

Теперь добавим код, который будет считать расстояние от точки А в точку Б. В нашем примере будем считать расстояния между городами Москва и Саратов. Однако стоит отметить, что считать расстояния можно не только для городов, но и для улиц (достаточно лишь просто указать полный адрес).

<script type="text/javascript">
var map;
ymaps.ready(function(){
    var mapDivId = 'map'; //Id контейнера для карты 
    var mapCenter = [55.76, 37.64]; //Координата центра карты по умолчанию
    map = new ymaps.Map(mapDivId , { center: mapCenter, zoom: 10 });

    var pointA = "Саратов"; //Откуда считаем
    var pointB = "Москва"; //Куда считаем
    ymaps.route([pointA , pointB ]).then(
      function (route) {
         var distance = route.getHumanLength(); //Получаем расстояние
         alert(distance.replace(' ', ' '));
         map.geoObjects.add(route); //Рисуем маршрут на карте
      },
      function (error) {
         alert('Ошибка: ' + error.message); 
      }
   );
});
</script>

Вот и все. Как видим процедура очень простая — но очень полезная! Ниже Вы можете наглядно увидеть пример использования.

Пример

От до