Автор

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 03.2013
Как вставить Яндекс-карту автомобильного маршрута на сайт, с выбором городов

Курсор, или указатель мыши, при просмотре сайтов в интернете обычно имеет вид стрелки, а при наведении на гиперссылки принимает вид руки-указателя. Между тем, в HTML предусмотрено большое разнообразие изображений курсора и их грамотное применение может быть весьма полезно веб-дизайнерам. Простыми средствами с помощью стилей можно переопределить вид курсора и выбрать один из более десяти доступных вариантов.


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

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


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

К данному решению пришел не сразу, способ реализации был третьим по счёту, как мне кажется, вполне достойным внимания. Основная фишка в том, что для реализации вообще не используется JavaScript.

Внимание! Метод не работает в IE8 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета.

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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close