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：用于检索位置信息的纬度/经度。
半径：定义返回位置结果的距离（以米为单位）
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);
    });
  }

}

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

1 个答案: