web-dev-qa-db-fra.com

Ionic - Google lieux et localisation à remplissage automatique

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

javascriptgoogle-mapsionic-frameworkionic2
22
Michael

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

4
Suraj Rao

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();
   });
}
0
Neo Split