Google API 从位置列表中检测离用户最近的位置

Question

我有一个用 Ionic 开发的手机应用程序，据说只支持少数商店。我想要做的是使用 Cordova Geolocation 来获取用户的当前位置，并使用它在我们的支持列表中找到离他们位置最近的商店。用于此的最佳 Google API 是什么，Google Maps 或 Google Places？另外，我实现这一目标的最简单方法是什么？

除了查找商店之外，我不需要使用任何其他地图功能。

Answer 1

提出搜索请求 (https://developers.google.com/places/web-service/search#PlaceSearchRequests)

附近的搜索查询

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

上述查询中的必需参数

• key ：您的应用程序 API 密钥。
• location ：检索地点信息的纬度/经度。
• radius : 定义返回位置结果的距离（以米为单位）
• rankby：距离
• type ：将结果限制在与指定类型匹配的地方。支持的类型列表 (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);
    });
  }

}