Ionic - Google places和自动完成定位
Ionic - Google places和自动完成定位
提问于 2017-02-24 07:08:56
我已经在Ionic 2上做了这个项目，到目前为止我已经实现了地图，但我无法摆脱这一点。为了将Google Place和Autocomplete添加到项目中，我需要告诉我应该走的路。
我能做什么?
HTML：
<ion-row>
<ion-item>
<ion-label>Search</ion-label>
<ion-input id="places" type="text" name="search"></ion-input>
</ion-row>
<div #map id="map"></div>HOME.ts
export class HomePage {
public latitude: number;
public longitude: number;
@ViewChild('map') mapElement;
map: any;
marker: any;
search: string;
constructor(public navCtrl: NavController, public platform: Platform) {
/*platform.ready().then(() => {
this.InitMap();
});*/
}
ionViewDidLoad(){
this.InitMap();
}
InitMap() {
this.setLocation();
let input = document.getElementById('places');
let autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', () => {
let place = autocomplete.getPlace();
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
alert(this.latitude + ", " + this.longitude);
console.log(place);
});
}
setLocation() {
let latLng = new google.maps.LatLng(53.550513, 9.994241);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.marker = new google.maps.Marker({
position: latLng,
map: this.map,
});
}
}怎么啦？感谢‘s
回答 2
Stack Overflow用户
发布于 2017-02-26 17:20:14
使用elementref来访问使用的离子输入，而不是document.getElementById Try：
<ion-input #places type="text" name="search"></ion-input> 在组件类中，
import {Elementref } from '@angular/core';
@ViewChild("places")
public places: ElementRef;
InitMap(){
this.setLocation();
let autocomplete = new google.maps.places.Autocomplete(this.places.nativeElement);
google.maps.event.addListener(autocomplete, 'place_changed', () => {
let place = autocomplete.getPlace();
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
alert(this.latitude + ", " + this.longitude);
console.log(place);
});
}检查angular docs here
Stack Overflow用户
发布于 2017-04-27 06:02:04
如果你所需要的只是"google places object"，那么你的代码可以非常简单，如下所示：
<ion-item>
<ion-label>Search your city</ion-label>
<ion-input formControlName="placeAutofill" id="googlePlaces" required></ion-input>
</ion-item>在我的代码中：
ionViewWillEnter() {
// Google Places API auto complete
let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
let autocomplete = new google.maps.places.Autocomplete(input, {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', () => {
// retrieve the place object for your use
let place = autocomplete.getPlace();
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42427915
复制相关文章
相似问题