Google API для определения местоположения, ближайшего к пользователю, из списка местоположений

Question

У меня есть приложение для телефона, разработанное на Ionic, которое предположительно поддерживает только несколько магазинов. Я хочу использовать Cordova Geolocation, чтобы получить текущее местоположение пользователя, и использовать его, чтобы найти магазин в нашем списке поддержки, ближайший к его местоположению. Какой API Google лучше всего использовать для этого, Google Maps или Google Places? Кроме того, что было бы самым простым способом для меня достичь этого?

Кроме поиска магазина мне не нужно использовать другие функции карты.

Answer 1

Разместить поисковые запросы ( https://developers.google.com/places/web-service/search)

Ближайший поисковый запрос

https://maps.googleapis.com/maps/api/place/nearbysearch/json?parameters

Обязательные параметры в запросе выше

• ключ: ключ API вашего приложения.
• местоположение: широта / долгота, вокруг которой можно получить информацию о месте.
• радиус: Определяет расстояние (в метрах), в пределах которого возвращаются результаты места
• рангби: расстояние
• Тип: Ограничивает результаты местами, соответствующими указанному типу. список поддерживаемых типов ( https://developers.google.com/places/web-service/supported_types)

пример

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=store&key=YOUR_API_KEY

ИОННАЯ ИМПЛИМЕНТАЦИЯ

Установите плагины Cordova и Ionic Native.

`$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"`

`$ npm install --save @ionic-native/geolocation`

HTML

<ion-header>
  <ion-navbar>
    <ion-title>
      Google Maps NearBy Search
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
</ion-content>

JS

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { googlemaps } from 'googlemaps';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  latLng: any;
  options: any;
  infowindow: any;

  constructor(private ngZone: NgZone, private geolocation: Geolocation) {}
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public geolocation: Geolocation) {}
  ionViewDidLoad() {
    this.initMap();
  }
  initMap() {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      this.options = {
        center: this.latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      this.map = new google.maps.Map(this.mapElement.nativeElement, this.options);
      let service = new google.maps.places.PlacesService(this.map);
      service.nearbySearch({
        location: this.latLng,
        radius: 1000,
        type: ['store']
      }, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            this.createMarker(results[i]);
          }
        }
      });

    }).catch((error) => {
      console.log('Error getting location', error);
    });

  }
  createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: placeLoc
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

}