Ionic - Google地点和自动完成地点 [英] Ionic - Google places and Autocomplete location

问题描述

我有关于Ionic 2的项目，我已经实施了该地图，但我无法摆脱这一点。我需要向我展示我应该如何将Google Place和Autocomplete添加到项目中。

我能做什么？

HTML：

 < ion-row> 
< ion-item> 
< ion-label>搜寻< / ion-label> 
< ion-input id =placestype =textname =search>< / ion-input> 
< /离子行> 
< div #map id =map>< / div> 
  

HOME.ts

  export class主页{
 
公共纬度：数字; 
公共经线：号码; 
 
 @ViewChild（'map'）mapElement; 
 map：any; 
 marker：any; 
 search：string; 
 
构造函数（public navCtrl：NavController，public platform：Platform）{
 /*platform.ready（）。then（（）=> {
 this.InMapMap（） ; 
}）; * / 
} 
 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-item> 
 < / ion-item> 
< / ion-list> 
  

Home.ts：

 从'@ angular / core'导入{Component}; 
从'ionic-angular'导入{NavController，ModalController}; 
从'./autocomplete'导入{AutocompletePage}; 
 
 @Component（{
 templateUrl：'build / pages / home / home.html'
}）
 
导出类主页{
地址; 
 
构造函数（
私有navCtrl：NavController，
私有ModalCtrl：ModalController 
）{
 this.address = {
 place：'' 
}; 
} 
 
 showAddressModal（）{
 let modal = this.modalCtrl.create（AutocompletePage）; 
让我= this; 
 modal.onDidDismiss（data => {
 this.address.place = data; 
}）; 
 modal.present（）; 
 
 
 
 
 $ b 
 AutocompletePage.html：
 
 
 < ion-header> 
< ion-toolbar> 
< ion-title>输入地址< / ion-title> 
 < / ion-toolbar> 
< / ion-header> 
 
< ion-content> 
< ion-list> 
< ion-item * ngFor =let item of autocompleteItemstappable（click）=chooseItem（item）> 
 {{item}} 
< / ion-item> 
< / ion-list> 
< / ion-content> 
  
 AutocompletePage.ts：
 从'@ angular / core'导入{Component，NgZone}; 
从'ionic-angular'导入{ViewController}; 
 
 @Component（{
 templateUrl：'build / pages / home / autocomplete.html'
}）
 
导出类AutocompletePage {
 autocompleteItems; 
自动完成; 
 
 latitude：number = 0; 
 longitude：number = 0; 
 geo：任何
 
服务=新google.maps.places.AutocompleteService（）; 
 
构造函数（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）; //将地址转换为lat和long 
} 
 
 updateSearch（）{
 
 if（this。 autocomplete.query ==''）{
 this.autocompleteItems = []; 
 return; 
} 
 
 let me = this; 
 this.service.getPlacePredictions（{
 input：this.autocomplete.query，
 componentRestrictions：{
 country：'de'
} 
}， （预测，状态）=> {
 me.autocompleteItems = []; 
 
 me.zone.run（（）=> {
 if（predictions！= null ）{
 predictions.forEach（（prediction）=> {
 me.autocompleteItems.push（prediction.description）; 
}）; 
} 
}） ; 
}）; 
} 
 
 //将地址字符串转换为纬度和长度
 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）; 
}）; 
} 
} 
  
 
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.

What can I do?

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

 }
What is wrong?
Thank's
解决方案

  
SOLVED! After a long time I was able to find a solution to my problem. Here's the solution:
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);
   });
 }
}


                        
这篇关于Ionic  -  Google地点和自动完成地点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！