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

Posted 2023-02-23

【中文标题】Google API 从位置列表中检测离用户最近的位置

【英文标题】：Google API to detect location closest to the user from a list of locations

【发布时间】：2018-08-26 07:40:11

【问题描述】：

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

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

【问题讨论】：

您在寻找附近用户当前位置的store 类型？您可以在 (developers.google.com/places/web-service/supported_types) 上查看支持的类型

【参考方案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);
    );