Геолокация Google Map API с Javascript - PullRequest
Новая
       55

Геолокация Google Map API с Javascript

0 голосов
/ 17 июня 2020

Я работаю над проектом, который определяет местонахождение кафе рядом с местонахождением пользователя (которое загружается через браузер). Я использую Google Maps API с геолокацией.

Моя идея состоит в том, чтобы определить местоположение пользователей с помощью геолокации, а затем найти кафе поблизости от их местоположения. Кажется, я не могу понять, как добавить кофейни или автоматический поиск и отобразить кофейни на карте рядом с пользователем после того, как местоположение будет извлечено браузером.

Жесткое кодирование местоположений просто не кажется нравится решение, но я надеялся получить несколько советов от более опытных программистов о том, как я могу это сделать.

На данный момент код для карты взят из документации Google Maps, поскольку он обеспечивает нужную мне функциональность кроме поиска.

Я вставил его ниже. 

     function mapFunc() {
         // referenced from google maps api documentation
         var map;
         var infoWindow;

         function initMap() {
             map = new google.maps.Map(document.getElementById('map'), {
                 center: {
                     lat: -34.397,
                     lng: 150.644
                 },
                 zoom: 15
             });
             infoWindow = new google.maps.InfoWindow;

             //HTML5 geolocation.
             if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(function (position) {
                     var pos = {
                         lat: position.coords.latitude,
                         lng: position.coords.longitude
                     };

                     infoWindow.setPosition(pos);
                     infoWindow.setContent('You are here!');
                     infoWindow.open(map);
                     map.setCenter(pos);
                 }, function () {
                     handleLocationError(true, infoWindow, map.getCenter());
                     search();
                 });
             } else {
                 // Browser doesn't support Geolocation
                 handleLocationError(false, infoWindow, map.getCenter());
             }
         }

         function handleLocationError(browserHasGeolocation, infoWindow, pos) {
             infoWindow.setPosition(pos);
             infoWindow.setContent(browserHasGeolocation ?
                 'Error: The Geolocation service failed.' :
                 'Error: Your browser doesn\'t support geolocation.');
             infoWindow.open(map);
         }

         //get coffee shops nearby??
          }




     mapFunc();

1 Ответ

0 голосов
/ 17 июня 2020

Вам необходимо использовать библиотеку мест в API Google Map.

Включите ее в тег, как показано ниже 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Затем используйте что-то вроде примера кода ниже: 

var map;
var service;
var infowindow;

function initialize() {
  //replace the lat long with results from your geocoding function
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500', //radius in metres
    type: ['coffee shops']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

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

подробности см. В https://developers.google.com/maps/documentation/javascript/places#place_search_requests

...