Ionic 2でプロジェクトに取り組んでおり、これまでにマップを実装しましたが、そのポイントから抜け出すことはできません。 Googleプレイスとオートコンプリートをプロジェクトに追加します。
私に何ができる?
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,
});
}
}
なにが問題ですか?ありがとう
解決しました!久しぶりに問題の解決策を見つけることができました。解決策は次のとおりです。
Home.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:
<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:
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);
});
}
}
document.getElementById
の代わりに、使用するイオン入力にアクセスするためにelementrefを使用してください:
<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
必要なのが「Google Placesオブジェクト」だけである場合、コードは次のように非常に簡単になります。
<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();
});
}