J'ai travaillé sur le projet sur Ionic 2 et j'ai implémenté la carte jusqu'à présent, mais je ne peux pas en sortir. Il me fallait montrer la voie à suivre pour pouvoir ajouter Google Place et la saisie semi-automatique au projet.
Que puis-je faire?
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,
});
}
}
Quel est le problème? Merci
Utilisez elementref pour accéder à l'entrée ionique utilisée au lieu de document.getElementById
Essayez:
<ion-input #places type="text" name="search"></ion-input>
Dans votre classe de composant,
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);
});
}
Vérifier les documents angulaires ici
Si tout ce dont vous avez besoin est "objet google places", votre code peut être très simple, comme ceci:
<ion-item>
<ion-label>Search your city</ion-label>
<ion-input formControlName="placeAutofill" id="googlePlaces" required></ion-input>
</ion-item>
Et dans mon code:
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();
});
}