Автор

19 01.2016
Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов


Многие уже сталкивались с этой задачей как на сайте установить карту с правильным маршрутом до пункта назначения из своего города! У меня уже есть публикация Как проложить маршрут на карте Google, но мне она показалась не удобной. Вот и я решил реализовать на одном из своих проектов такую, на мой взгляд удобную функцию. Поискав в интернете разные варианты я нашел, по моему, самый оптимальный и удобный. На самом деле всё очень просто! На сайте Яндекса есть Расчёт стоимости доставки который вполне подходит к данной задаче, но я немного сделал подругому:

 

ДЕМО

 

И так начнем!

HTML

Вставляем в нужное место код:

<div id="controls">
    <label><span>От:</span> <input type="text" id="route-from" value="Москва" /></label>
    <label><span>До:</span> <input type="text" id="route-to" value="Саратов" /></label>
    <div><input type="submit" value="Построить маршрут" onclick="createRoute();" /></div>
    <br />
    <div id="route-length"></div>
</div>
<div id="map"></div>

 

Подключаем стили для вывода поисковой формы городов

CSS

#map {
  width: 100%;
  height: 650px;
  margin-top: 70px;
}
 #controls {
  position: absolute;
  top: 5.5em;
  right: 1.5em;
  z-index: 10;
  background: #fff;
  padding: 1em 2em;
  opacity: 0.9;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}
#controls label {
  display: block;
  margin: 1em 0;
  font-size: 12pt;
}
#controls label span {
  display: inline-block;
  min-width: 3.5em;
}
#controls label input {
  font-size: 12pt;
  padding-bottom: .2em;
  width: 10em;
  border: none;
  border-bottom: solid 1px #999;
  color: #000;
  outline: none;
  webkit-appearance: none;
}

 

Ну и сам скрипт вывода карты

JS

var map, mapRoute;
    
      ymaps.ready(function() {
        map = new ymaps.Map('map', {
          center: [55.76, 37.64],
          zoom: 5
        });
      });
      
      function createRoute() {
        // Удаление старого маршрута
        if (mapRoute) {
          map.geoObjects.remove(mapRoute);
        }
        
        var routeFrom = document.getElementById('route-from').value;
        var routeTo = document.getElementById('route-to').value;
        
        // Создание маршрута
        ymaps.route([routeFrom, routeTo], {mapStateAutoApply:true}).then(
          function(route) {
            map.geoObjects.add(route);
            document.getElementById('route-length').innerHTML = 'Длина маршрута = ' + route.getHumanLength();
            mapRoute = route;
          },
          function(error) {
            alert('Невозможно построить маршрут');
          }
        );
      }

 

Вот и все. Готово!

Пользуйтесь! Буду рад если это Вам поможет в осуществлении своих проектов!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

25 01.2018
Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


21 03.2013
Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


27 04.2013
Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

Адаптивность играет большую роль в современном веб-дизайне, ведь с появлениям мобильных устройств появилась и проблема адаптации веб-ресурса под размер экрана, многие мастера не заморачиваются таким вопросом и оставляют сайт таким как есть, некоторые идут на хитрость и создают отдельный мобильный шаблон, но что делать, если вы не хотите себя относить к этим двум группам, тогда выход есть, необходимо создать адаптивные элементы на сайте, которые будут изменять размер и подстраиваться под необходимое разрешения.


02 04.2013
Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close