Одним из наиболее часто используемых API на сегодняшний день является API Geolocation. Геолокация позволяет приложению определять ваши физические координаты и адаптировать приложение к вам. Это может значительно улучшить ваш пользовательский опыт. В этой статье вы узнаете, как использовать API геолокации вместе с API Карт Google.
API Карт Google позволяет интегрировать службу Карт Google с вашим веб-сайтом. В примерах этой статьи используется версия API 3.10. Сервис полностью бесплатный, но вы должны подписаться на веб-сайт консоли API, чтобы получить ключ API, и использовать его при отправке запроса в сервис. Если вам нужна информация о том, как получить ключ, вы можете прочитать руководство по началу работы . Ключ API позволяет отслеживать использование вашего приложения и дает Google возможность связаться с вами в случае необходимости. Помните, что в Google Maps API есть ограничения на использование, которые вы можете увеличить за отдельную плату. Эта статья также предполагает базовое понимание геолокации, которое вы можете получить, прочитав Использование API геолокации HTML5 .
Обзор API Карт Google
В этом разделе рассматриваются основные классы и методы API Карт Google. Есть много других доступных объектов и методов, но обсуждение каждого аспекта API выходит за рамки этой статьи. Самый важный и используемый класс библиотеки — google.maps.Map
Класс Map
принимает два параметра, которые являются HTML-элементом, который будет содержать карту, и объектом google.maps.MapOptions
. Объекты MapOptions
-
center
google.maps.LatLng
-
mapTypeId
google.maps.MapTypeId
Например, вы можете увидеть карту в виде дорожной карты или спутниковой карты. -
zoom
Помимо нескольких методов установки и получения атрибутов класса, есть несколько методов, которые стоит упомянуть. Первый — это fitBounds()
LatLngBounds
LatLngBounds
Это устанавливает вид карты для содержания заданных границ. Второй метод — это panTo()
LatLng
Другим важным классом является google.maps.LatLng
Этот класс используется почти во всех методах API Карт. Например, мы будем использовать его для центрирования карты на позиции пользователя. Однако они также используются для трассировки маршрута или для рисования ломаной линии на карте.
Многие карты содержат маркеры, которые обозначают достопримечательности, такие как пункт назначения. Чтобы разместить маркеры на карте, вы должны использовать класс google.maps.Marker
Он создает маркер с параметрами (объект google.maps.MarkerOptions
Единственный обязательный параметр — это position
Последний класс, который я опишу перед тем, как показать вам пример, — это Geocoder
Это позволяет вам конвертировать адрес в объект LatLng
Он имеет пустой конструктор и только один метод, geocode()
GeocoderRequest
Основной пример
Используя несколько классов, описанных выше, вы теперь можете написать простое, но приятное приложение. Пример не очень сложен для понимания, но все же использует все обсуждаемые классы и методы. Пример извлекает позицию пользователя и показывает ее с помощью маркера на карте. Сервис Geocoder
Мы также будем использовать параметр accuracy
Первый шаг к использованию API Карт — включить его. Это очень просто и состоит из простого добавления следующей строки на вашу веб-страницу.
<script src="http://maps.google.com/maps/api/js?key=YOUR-KEY-GOES-HERE&sensor=true"></script>
Поскольку Карты Google по-прежнему будут работать без ключа, и, чтобы избежать длинной строки в примере, просто напишите следующее.
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
Обратите внимание, что обе строки содержат параметр sensor
Он должен быть включен в URL и иметь значение true
false
Вы можете прочитать больше об этом в Загрузка API Карт .
Для построения примера мы будем использовать две функции. Первый использует положение пользователя, чтобы создать карту и нарисовать круг вокруг пользователя. Вторая функция запрашивает Google, чтобы получить адрес пользователя на основе его местоположения. Давайте посмотрим на ключевые моменты обоих.
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
Эта простая линия использует широту и долготу объекта Position
LatLng
Мы будем использовать этот объект в остальной части функции. Фактически, это будет использоваться в MapOptions
Map
В качестве контейнера для карты я буду использовать элемент <div>
map
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
Теперь пришло время добавить маркер на карту, чтобы обозначить положение пользователя. Мы будем использовать значок Google Maps по умолчанию, но вы можете указать понравившееся вам изображение, используя свойство icon
setIcon()
new google.maps.Marker({map: mapObject, position: userLatLng });
В этот момент вы можете закрыть функцию и получить карту, отображающую положение пользователя с помощью простого маркера. Однако, поскольку в настольной среде точность может быть очень низкой, было бы неплохо это визуализировать. Мы сделаем это, используя класс Circle
У него много свойств для установки цвета, непрозрачности, радиуса и т. Д., Но наиболее важным свойством является объект карты, к которому он применяется.
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
Обратите внимание, что последний оператор вызывает метод fitBounds()
Это сделано для того, чтобы если окружность выходит за пределы увеличенного изображения, карта будет соответственно уменьшена для отображения всего круга.
Вторая функция с именем writeAddressName()
LatLng
location
Geocoder
В функции обратного вызова мы проверим, произошла ли ошибка. Если ошибка возникает, она будет отображена. В противном случае отображается форматированный адрес.
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
document.getElementById("address").innerHTML = results[0].formatted_address;
else
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
});
}
Собираем все вместе
Учитывая код, показанный в предыдущем разделе, окончательный и полностью рабочий код показан ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Geolocation and Google Maps API</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
document.getElementById("address").innerHTML = results[0].formatted_address;
else
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
<style type="text/css">
#map {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<h1>Basic example</h1>
<div id="map"></div>
<p><b>Address</b>: <span id="address"></span></p>
<p id="error"></p>
</body>
</html>
Выводы
В этой статье объясняется несколько методов и свойств наиболее важных классов в API Карт Google. Кроме того, мы показали, как вы можете использовать их вместе с Geolocation API для создания полноценного и функционального сервиса для отслеживания местоположения вашего пользователя и определения местоположения на карте. Конечно, вы можете сделать гораздо больше, чем это, как вы увидите в следующей статье об этом удивительном API.