В данном уроке мы рассмотрим как можно проложить маршрут на карте Google? при этом у Вас будет самостоятельно указать пункты назначения в специальном окне навигации, кроме этого после прокладывания пути Вы увидите расстояние в километрах. Для реализации такой манипуляции с картами нам понадобится небольшой кусок стилей, в котором мы укажем параметры для блока ввода информации и линия, которая будет обозначать маршрут. За расчет маршрута у нас будет отвечать функции js, с помощью которой также мы и узнаем дистанцию.
Такая карта станет полезная для информативных сайтов, работающие с картами, Вы сможете наглядно продемонстрировать желаемый маршрут в полноэкранном режиме. И так, давайте приступим.
Шаг 1. HTML
Разметка у нас будет проста, нам необходимо указать разметку для панели навигации и вызов самой карты, реализуем мы это с помощью следующих команд:
<div id="controls">
<label><span><b>От куда:</b></span> <input type="text" name="from"></label>
<label><span><b>Куда:</b></span> <input type="text" name="to"></label>
<p></p>
</div>
<div id="map"></map>
Кроме этого нам необходимо подключить пару скриптов с репозитория Google.
Шаг 2. CSS
Теперь нам необходимо стилизовать наши карты, задать стиль для маршрута, у нас будет красная, полупрозрачная линия, и оформление панели навигации:
#map {
width: 100%;
height: 100%;
}
#controls {
position: absolute;
top: 1.5em;
right: 1.5em;
z-index: 10;
background: #fff;
padding: 1em 2em;
opacity: .8;
border-top: solid .4em #444;
border-bottom: solid .4em #444;
label {
display: block;
margin: 1em 0;
span {
display: inline-block;
min-width: 3.5em;
}
input {
font-family: 'Montserrat';
font-size: 12pt;
padding-bottom: .2em;
width: 10em;
border: none;
border-bottom: solid 1px #999;
color: #000;
outline: none;
webkit-appearance: none;
}
}
p {
text-align: right;
font-size: 80%;
margin: 1em 0 .5em 0;
}
p.error {
color: #b00;
}
}
Кроме этого мы указали общие параметры наложения и позиционирование блоков на странице, добавили несколько полос для блока навигации для большей отзывчивости интерфейса.
Шаг 3. JS
Теперь нам необходимо создать функцию, которая будет рассчитывать и прокладывать маршрут между двумя точками. Кроме это у Вас есть возможность указать в каких единицах измерения будет расстояние. Также у нас установлены два фиксированных города для демонстрации.
$(document).ready(function(){
function initMap() {
var latlng = new google.maps.LatLng(51.5, 0);
var mapOptions = {
center: latlng,
zoom: 8,
mapTypeControl: false,
streetViewControl: false,
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
function drivingRoute(from, to) {
var request = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
$('#controls p').removeClass('error');
$('#controls p').text('loading');
if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null);
directionsService.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
var totalKM = (response.routes[0].legs[0].distance.value / 1000);
var miles = Math.round(totalKM * 0.621371192 * 10) / 10;
var distanceText = miles+' miles';
$('#controls p').text(distanceText);
drivingLine = new google.maps.Polyline({
path: response.routes[0].overview_path,
strokeColor: "#b00",
strokeOpacity: .75,
strokeWeight: 5
});
drivingLine.setMap(map);
map.fitBounds(response.routes[0].bounds);
}
else {
$('#controls p').addClass('error');
$('#controls p').text('cannot load route');
}
});
}
$('input').blur(function(){
drivingRoute(
$('input[name=from]').val(),
$('input[name=to]').val()
);
});
var map;
var drivingLine;
var directionsService = new google.maps.DirectionsService();
initMap();
$('input[name=from]').val('Witney');
$('input[name=to]').val('Cardiff');
$('input[name=from]').trigger('blur');
});
Вот и все. Готово!
Материал взят из зарубежного источника - codepen.io/blucube/pen/reuaK и представлен исключительно в ознакомительных целях.