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

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

0 голосов
/ 26 августа 2018

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

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

1 Ответ

0 голосов
/ 30 августа 2018

Запрос поиска места (https://developers.google.com/places/web-service/search#PlaceSearchRequests)

Поисковый запрос поблизости

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

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

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

Пример * +1026 *

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);
    });
  }

}
...