我有一个用Ionic开发的手机应用程序,据说只支持少数商店。我想做的是使用 Cordova 地理位置获取用户的当前位置,并使用它来在我们的支持列表中查找最靠近其位置的商店。最好的谷歌API是什么,谷歌地图或谷歌地方?另外,对我来说实现这一目标的最简单方法是什么?
除了找到商店,我不需要使用任何其他地图功能。
放置搜索请求 (https://developers.google.com/places/web-service/search#PlaceSearchRequests(
附近搜索查询
https://maps.googleapis.com/maps/api/place/nearbysearch/json?parameters
上述查询中的必需参数
- 密钥:您的应用程序 API 密钥。
- 位置:检索地点信息的纬度/经度。
- 半径:定义返回地点结果的距离(以米为单位(
- 排名:距离
- 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);
});
}
}