Статьи

API геолокации HTML5 с Google Maps

Сентябрь 6, 2017

Я читал HTML5 Head First, и в этой книге я прочитал о поддержке геолокации в HTML5 , а также ознакомился с примером, которым они поделились об использовании Карт Google с API геолокации HTML5. Это был интересный пример, и я пошел дальше и улучшил пример, чтобы показать некоторые закуски вокруг определенного места. Для этого я использовал библиотеку Places, которая поставляется с Google Maps API.

В этом посте я расскажу:

  1. Начало работы с API геолокации HTML5
  2. Интеграция карты Google для отображения текущего местоположения
  3. Улучшение примера, чтобы показать близлежащие места на карте Google

Начало работы с API геолокации HTML5

Geolocation API позволяет браузеру определять местоположение пользователя, используя различные механизмы, такие как IP-адрес пользователя, местоположение GPS и сотовые сети, в зависимости от используемого пользователем устройства. Местоположение идентифицируется как пара значений широты и долготы. Давайте создадим простую HTML-страницу и файл JavaScript, чтобы получить местоположение пользователя:

<html>
  <head>
    <meta charset="utf-8">
    <title>Where am I?</title>
    <script src="myLoc.js"></script>
  </head>
  <body>
    <!-- The location will be updated in the below div -->
    <div id="location">
      Your location will go here.
    </div>
  </body>
</html>

И код JavaScript, который обновляет приведенный выше HTML с указанием местоположения пользователя:

//myLoc.js
window.onload = getMyLocation;

function getMyLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation);
  } else {
    alert("Oops, no geolocation support");
  }
}

//This function is inokved asynchronously by the HTML5 geolocation API.
function displayLocation(position) {

  //The latitude and longitude values obtained from HTML 5 API.
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  //Setting the latitude and longitude values in the div.
  var div = document.getElementById("location");
  div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}

В приведенной выше коде JavaScript, в navigatorобъекте geolocationнедвижимость используется для получения местоположения пользователя. Если браузер поддерживает API геолокации HTML5, он запросит у пользователя подтверждение доступа к его местоположению. После определения местоположения он асинхронно вызывает обратный вызов, displayLocationзарегистрированный в API геолокации. Обратный вызов не делает ничего особенного, кроме обновления HTML значениями широты и долготы.

Интеграция Google Maps для отображения текущего местоположения

Чтобы интегрировать карту Google, нужно начать с документа « Приступая к работе» для API Google Maps, в котором показано, как получить ключ API Google, а также с некоторыми примерами, чтобы начать использовать API Карт Google. Чтобы отметить текущее местоположение на карте Google, нужно сделать следующее:

  1. Создайте объект LatLng, используя значения широты и долготы, полученные из API геолокации. 
    //Creating a new object for using latitude and longitude values with Google map.
var latLng = new google.maps.LatLng(latitude, longitude);
  2. Создайте объект MapOptions . 
    //Setting up the map options like zoom level, map type.
var mapOptions = {
  center: latLng,
  zoom: 18,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
  3. Создайте объект Map и передайте элемент HTML (в нашем случае, divтег) для встраивания карты и объекта MapOptions, созданных на шаге выше. 
    //Creating the Map instance and assigning the HTML div element to render it in.
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  4. Создайте объект MarkerOptions, указывающий местоположение, которое будет отмечено на карте. 
    var markerOptions = {
  position: latLng,
  map: map,
  animation: google.maps.Animation.DROP,
  clickable: true
}
  5. Создайте объект Marker и предоставьте ему объект MarkerOptions и объект Map, созданные на предыдущих этапах. Этот объект Marker использует объект MarkerOptions, чтобы получить информацию о местоположении, а затем объект Map, чтобы отметить местоположение. 
    //Setting up the marker object to mark the location on the map canvas.
var marker = new google.maps.Marker(markerOptions);
  6. Кроме того, давайте добавим окно заметки, которое покажет что-то о месте, когда пользователь нажимает на это место. Это достигается путем создания объекта InfoWindowOptions и использования его для создания объекта InfoWindow. Это окно заметок должно открываться, когда пользователь нажимает на маркер, что можно сделать, добавив прослушиватель clickсобытий для события. 
    var infoWindowOptions = {
  content: content,
  position: latLng
};

var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

google.maps.event.addListener(marker, "click", function() {
  infoWindow.open(map);
});

Полный код, который показывает местоположение на карте Google, приведен ниже:

<!-- index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Where am I?</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script src="myLoc.js"></script>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
  </head>
  <body>
    <div id="location">
      Your location will go here.
    </div>
    <div id="map-canvas">
      Google Map will go here!.
    </div>
  </body>
</html>

Код JavaScript:

//myLoc.js
window.onload = getMyLocation;
//Note that map has been globally declared.
var map;
function getMyLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation);
  } else {
    alert("Oops, no geolocation support");
  }
}

//This function is inokved asynchronously by the HTML5 geolocation API.
function displayLocation(position) {
  //The latitude and longitude values obtained from HTML 5 API.
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  //Creating a new object for using latitude and longitude values with Google map.
  var latLng = new google.maps.LatLng(latitude, longitude);

  showMap(latLng);
  createMarker(latLng);
  
  //Also setting the latitude and longitude values in another div.
  var div = document.getElementById("location");
  div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}

function showMap(latLng) {
  //Setting up the map options like zoom level, map type.
  var mapOptions = {
    center: latLng,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  //Creating the Map instance and assigning the HTML div element to render it in.
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function createMarker(latLng) {
  //Setting up the marker object to mark the location on the map canvas.
  var markerOptions = {
    position: latLng,
    map: map,
    animation: google.maps.Animation.DROP,
    clickable: true
  }
  var marker = new google.maps.Marker(markerOptions);

  var content = "You are here: " + latLng.lat() + ", " + latLng.lng();
  addInfoWindow(marker, latLng, content);

}

function addInfoWindow(marker, latLng, content) {
  var infoWindowOptions = {
    content: content,
    position: latLng
  };

  var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.open(map);
  });
}

Улучшение примера для отображения близлежащих мест на картах Google

Теперь давайте воспользуемся библиотекой Places и отметим ближайшие закусочные на карте. Это включает в себя следующие шаги:

  1. Создайте экземпляр PlacesService, используя ранее созданный объект Map. 
    var nearByService = new google.maps.places.PlacesService(map);
  2. Создайте объект PlacesSearchRequest для хранения информации, связанной с поиском мест. 
    var request = {
  location: latLng,
  radius: 1000,
  types: ['food', 'bakery', 'cafe', 
          'grocery_or_supermarket', 
          'meal_delivery','restaurant', 
          'meal_takeaway', 
          'shopping_mall']
};
  3. Создайте метод обратного вызова, который будет вызываться при получении результата Places. Этот метод обратного вызова будет предоставлен с результатами и статусом результата. 
    function handleNearBySearchResults(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(place.geometry.location, place);
    }
  }
}
  4. Зарегистрируйте обратный вызов с помощью объекта PlacesService, а также предоставьте объект PlacesSearchRequest, созданный выше. 
    nearByService.nearbySearch(request, handleNearBySearchResults);

Давайте посмотрим на полный код, который идентифицирует местоположение, помечает его на Google Maps, а также отмечает близлежащие закусочные на карте.

HTML-код для этого:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Where am I?</title>
    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places,weather"></script>
    <script src="myLoc.js"></script>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
  </head>
  <body>
    <div id="location">
      Your location will go here.
    </div>
    <div id="map-canvas">
      Google Map will go here!.
    </div>
  </body>
</html>

Код JavaScript для этого:

window.onload = getMyLocation;

var map;
function getMyLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(displayLocation);
  } else {
    alert("Oops, no geolocation support");
  }
}

//This function is inokved asynchronously by the HTML5 geolocation API.
function displayLocation(position) {
  //The latitude and longitude values obtained from HTML 5 API.
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

  //Creating a new object for using latitude and longitude values with Google map.
  var latLng = new google.maps.LatLng(latitude, longitude);

  showMap(latLng);

  addNearByPlaces(latLng);
  createMarker(latLng);
  
  //Also setting the latitude and longitude values in another div.
  var div = document.getElementById("location");
  div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}

function showMap(latLng) {
  //Setting up the map options like zoom level, map type.
  var mapOptions = {
    center: latLng,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  //Creating the Map instance and assigning the HTML div element to render it in.
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

function addNearByPlaces(latLng) {

  var nearByService = new google.maps.places.PlacesService(map);

  var request = {
    location: latLng,
    radius: 1000,
    types: ['food', 'bakery', 'cafe', 'grocery_or_supermarket', 'meal_delivery','restaurant', 'meal_takeaway', 'shopping_mall']
  };

  nearByService.nearbySearch(request, handleNearBySearchResults);
}

function handleNearBySearchResults(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(place.geometry.location, place);
    }
  }
}

function createMarker(latLng, placeResult) {
  var markerOptions = {
    position: latLng,
    map: map,
    animation: google.maps.Animation.DROP,
    clickable: true
  }
  //Setting up the marker object to mark the location on the map canvas.
  var marker = new google.maps.Marker(markerOptions);

  if (placeResult) {
    var content = placeResult.name+"<br/>"+placeResult.vicinity+"<br/>"+placeResult.types;
    addInfoWindow(marker, latLng, content);
  }
  else {
    var content = "You are here: " + latLng.lat() + ", " + latLng.lng();
    addInfoWindow(marker, latLng, content);
  }

}

function addInfoWindow(marker, latLng, content) {
  var infoWindowOptions = {
    content: content,
    position: latLng
  };

  var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.open(map);
  });
}

Вы можете получить доступ к этому образцу приложения в прямом эфире здесь .

40
Share: