我在 Ionic 2 的项目上工作,到目前为止我已经实现了地图,但我无法摆脱这一点.为了将 Google Place 和 Autocomplete 添加到项目中,我需要了解我应该采取的方式.
I have work on the project on Ionic 2 and I have implemented the map so far, but I can not get out of that point. I needed to be shown the way I should go in order to add Google Place and Autocomplete to the project.
我能做什么?
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,
});
}
}
怎么了?谢谢
已解决!很长一段时间后,我能够找到解决问题的方法.这是解决方案:
SOLVED! After a long time I was able to find a solution to my problem. Here's the solution:
主页.html:
<ion-list>
<ion-item>
<ion-input (click)="showAddressModal()" [(ngModel)]="address.place"type="text" placeholder="Pick an address"> </ion-input>
</ion-item>
</ion-list>
Home.ts:
import {Component} from '@angular/core';
import {NavController, ModalController} from 'ionic-angular';
import {AutocompletePage} from './autocomplete';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
address;
constructor(
private navCtrl: NavController,
private ModalCtrl:ModalController
) {
this.address = {
place: ''
};
}
showAddressModal () {
let modal = this.modalCtrl.create(AutocompletePage);
let me = this;
modal.onDidDismiss(data => {
this.address.place = data;
});
modal.present();
}
}
AutocompletePage.html:
AutocompletePage.html:
<ion-header>
<ion-toolbar>
<ion-title>Enter address</ion-title>
<ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of autocompleteItems" tappable (click)="chooseItem(item)">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
AutocompletePage.ts:
AutocompletePage.ts:
import {Component, NgZone} from '@angular/core';
import {ViewController} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/home/autocomplete.html'
})
export class AutocompletePage {
autocompleteItems;
autocomplete;
latitude: number = 0;
longitude: number = 0;
geo: any
service = new google.maps.places.AutocompleteService();
constructor (public viewCtrl: ViewController, private zone: NgZone) {
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};
}
dismiss() {
this.viewCtrl.dismiss();
}
chooseItem(item: any) {
this.viewCtrl.dismiss(item);
this.geo = item;
this.geoCode(this.geo);//convert Address to lat and long
}
updateSearch() {
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let me = this;
this.service.getPlacePredictions({
input: this.autocomplete.query,
componentRestrictions: {
country: 'de'
}
}, (predictions, status) => {
me.autocompleteItems = [];
me.zone.run(() => {
if (predictions != null) {
predictions.forEach((prediction) => {
me.autocompleteItems.push(prediction.description);
});
}
});
});
}
//convert Address string to lat and long
geoCode(address:any) {
let geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, (results, status) => {
this.latitude = results[0].geometry.location.lat();
this.longitude = results[0].geometry.location.lng();
alert("lat: " + this.latitude + ", long: " + this.longitude);
});
}
}
这篇关于Ionic - Google 地方和自动填充位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!