Статьи

Работа с геолокацией и API Карт Google

Ноябрь 3, 2018

Одним из наиболее часто используемых 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

  • centergoogle.maps.LatLng
  • mapTypeIdgoogle.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 и иметь значение truefalse Вы можете прочитать больше об этом в Загрузка API Карт .

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

 var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Эта простая линия использует широту и долготу объекта PositionLatLng Мы будем использовать этот объект в остальной части функции. Фактически, это будет использоваться в MapOptionsMap В качестве контейнера для карты я буду использовать элемент <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 по умолчанию, но вы можете указать понравившееся вам изображение, используя свойство iconsetIcon() 

 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()LatLnglocationGeocoder В функции обратного вызова мы проверим, произошла ли ошибка. Если ошибка возникает, она будет отображена. В противном случае отображается форматированный адрес. 

 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.

82
Share: