Ionic 2 - 如何使用Google places 和Autocomplete location。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (210)

我在Ionic 2的项目上做过工作,我应该怎么做才能将GooglePlace和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,
   });
  }

 }

怎么了?

提问于
用户回答回答于

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

AutoCAD Page.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.html:

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: 'TH'} }, function (predictions, status) {
      me.autocompleteItems = []; 
      me.zone.run(function () {
        predictions.forEach(function (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);
   });
 }
}
用户回答回答于

试着:

<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);
      });

    }

扫码关注云+社区

领取腾讯云代金券