Добрый день, уважаемый читатель. Заказали у меня скрипт для прокладки маршрута на карте, расчёта расстояний между городами. Первое, на что наткнулся:
http://habrahabr.ru/blogs/webdev/110460/ Тут рассказывается о том, как подключить карту на страницу, расставить пины на ней. Был у меня опыт работы с такой фичей на айфоне, а тут мы будем писать полностью рабочее JavaScript решение (без серверной стороны!). Итак, создаём файл map.html и пишем туда обычные для любого html документа строки, сразу подключаем jquery (оно на по-любому где-нибудь понадоибится).
Статья написана не до конца (т.к. маршрут на Google Maps по России не прокладывается)
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></script>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<style type="text/css">
#map_canvas
{
width:400px;
height:300px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
width:"200px"
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Этот код выведет у вас на странице карту (на разные файлы стили и javascript не разношу для удобства написания статьи). Далее нам нужно понять как проложить маршрут между двумя точками. Хоть и достаточно сложно найти нужные статьи в интернете, но благо гуглу и его отличной документации:
Directions Requests . Из документации мы берём функцию
function calcRoute()
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
Т.е. гугл даёт нам вполне удобный фреймворк для работы с его картой. Нам достаточно придать переменный start и end нужный вид (название города или координаты точки) и указать каким образом мы будем передвигаться
(travelMode : DRIVING, WALKING, BICYCLING (велосипеды на момент написания статьи поддерживаются только в US)), после чего наш маршрут проложен и останется получить лишь необходимые нам данные: через какие города проходит маршрут, расстояние между каждым населёнными пунктами и полное расстояние между городами, а для этого нам нужно будет использовать
Distance Matrix API. Но сначала разберёмся как нам правильно проложить маршрут между двумя нашими городами (например, Москва и Париж).
Используем
Geocoding API. Для того, чтобы получить координаты города нам нужно послать обычный GET-запрос:
http://maps.google.com/maps/geo?q=Москва&output=json&oe=utf8&sensor=false. Но, как мы знаем, москва есть и в Америке:
http://maps.google.com/maps/geo?q=Moscow+US&output=json&oe=utf8&sensor=false . Это всё хорошо, но тут я наткнулся в документации, что это дедовские методы, а сейчас пора
Google Maps V3. Вуаля, есть повод для размышлений. Открываю консоль в google chrome и начинаю писать запрос через классы.
Копаем Google Maps V3.4
http://maps.google.com/maps/api/js?sensor=false&v=3.4&language=ru
Все методы, которые были описаны выше работают, но теперь я задаюсь вопросом: как продвинутые пользователи работают с картами. Для начала мы начнём с геокодирования. Есть класс google.maps.Geocoder() который имеет один метод
geocode(request:GeocoderRequest, callback:function(Array.<GeocoderResult>,GeocoderStatus)).
GeocoderRequest в свою очередь это обычная спецификация объекта (т.е. как объект должен выглядеть):
var Request = { address : "Адресс для геокодирования",
bounds : "Квадрат поиска, является объектом
LatLngBounds",
language : "Желаемый язык результата",
location : "Координаты, вокруг которых искать, является объектом
LatLng",
region : "Домен страны, по которой идёт поиск" } - вот и весь объект
Далее привожу описание классов из документации гугла:
google.maps.GeocoderStatus class
The status returned by the Geocoder on the completion of a call to geocode().
Constant
| Constant | Description |
|---|
ERROR | There was a problem contacting the Google servers. |
INVALID_REQUEST | This GeocoderRequest was invalid. |
OK | The response contains a valid GeocoderResponse. |
OVER_QUERY_LIMIT | The webpage has gone over the requests limit in too short a period of time. |
REQUEST_DENIED | The webpage is not allowed to use the geocoder. |
UNKNOWN_ERROR | A geocoding request could not be processed due to a server error. The request may succeed if you try again. |
ZERO_RESULTS | No result was found for this GeocoderRequest. |
google.maps.GeocoderResult object specification
A single geocoder result retrieved from the geocode server. A geocode request may return multiple result objects. Note that though this result is "JSON-like," it is not strictly JSON, as it indirectly includes a LatLng object.
Properties
| Properties | Type | Description |
|---|
address_components | Array.<GeocoderAddressComponent> | An array of GeocoderAddressComponents |
geometry | GeocoderGeometry | A GeocoderGeometry object |
types | Array.<string> | An array of strings denoting the type of the returned geocoded element. A type consists of a unique string identifying the geocode result. (For example, "administrative_area_level_1", "country", etc.) |
google.maps.GeocoderAddressComponent object specification
A single address component within a GeocoderResult. A full address may consist of multiple address components.
Properties
| Properties | Type | Description |
|---|
long_name | string | The full text of the address component |
short_name | string | The abbreviated, short text of the given address component |
types | Array.<string> | An array of strings denoting the type of this address component |
Теперь с помощью этих классов мы можем поставить карту на нужный адрес. Пример:
var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': "Moscow"}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } });
Ну это не практический пример.. Нам надо получить полное название всех городов и вывести их на экран, где человек уже выберет нужный город
var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': "Odessa USA"}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { for(var i = 0; i < results.length; i++) console.log(results[i].formatted_address, results[i].geometry.location.lat(), results[i].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });
Тут мы получили все необходимые точки, ввода данных будет происходить ниже. Сейчас надо разобраться, как получить маршрут. Вроде вверху и была функция, которая легко получала маршрут, но посмотрите на это:
Первый запрос отлично возвращает информацию о маршруте, а второй совсем не хочет.. пишет ZERO_RESULTS. В документации написано, что не может быть найден маршрут. Но на другом сайте, использующем google maps маршрут прокладывается. В чем дело, гугл? На этом пока ступор.. даже на maps.google.com не выводит маршрута.
JQuery UI и Вывод на экран
Это как раз то, что нужно, полностью берём код примера и копируем себе на страницу
следующие файлы:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
и картинку можно взять отсюда
