<legend id='RkHdK'><style id='RkHdK'><dir id='RkHdK'><q id='RkHdK'></q></dir></style></legend>
    • <bdo id='RkHdK'></bdo><ul id='RkHdK'></ul>

      1. <small id='RkHdK'></small><noframes id='RkHdK'>

        <i id='RkHdK'><tr id='RkHdK'><dt id='RkHdK'><q id='RkHdK'><span id='RkHdK'><b id='RkHdK'><form id='RkHdK'><ins id='RkHdK'></ins><ul id='RkHdK'></ul><sub id='RkHdK'></sub></form><legend id='RkHdK'></legend><bdo id='RkHdK'><pre id='RkHdK'><center id='RkHdK'></center></pre></bdo></b><th id='RkHdK'></th></span></q></dt></tr></i><div id='RkHdK'><tfoot id='RkHdK'></tfoot><dl id='RkHdK'><fieldset id='RkHdK'></fieldset></dl></div>

        <tfoot id='RkHdK'></tfoot>

        Ionic - Google 地方和自动填充位置

        时间:2023-09-08
      2. <i id='7yXJe'><tr id='7yXJe'><dt id='7yXJe'><q id='7yXJe'><span id='7yXJe'><b id='7yXJe'><form id='7yXJe'><ins id='7yXJe'></ins><ul id='7yXJe'></ul><sub id='7yXJe'></sub></form><legend id='7yXJe'></legend><bdo id='7yXJe'><pre id='7yXJe'><center id='7yXJe'></center></pre></bdo></b><th id='7yXJe'></th></span></q></dt></tr></i><div id='7yXJe'><tfoot id='7yXJe'></tfoot><dl id='7yXJe'><fieldset id='7yXJe'></fieldset></dl></div>

          <tbody id='7yXJe'></tbody>
        • <tfoot id='7yXJe'></tfoot>

          <legend id='7yXJe'><style id='7yXJe'><dir id='7yXJe'><q id='7yXJe'></q></dir></style></legend>
            <bdo id='7yXJe'></bdo><ul id='7yXJe'></ul>

                <small id='7yXJe'></small><noframes id='7yXJe'>

                • 本文介绍了Ionic - Google 地方和自动填充位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

                  问题描述

                  我在 Ionic 2 的项目上工作,到目前为止我已经实现了地图,但我无法摆脱这一点.为了将 Google Place 和 Autocomplete 添加到项目中,我需要了解我应该采取的方式.

                  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.

                  我能做什么?

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

                  怎么了?谢谢

                  推荐答案

                  已解决!很长一段时间后,我能够找到解决问题的方法.这是解决方案:

                  SOLVED! After a long time I was able to find a solution to my problem. Here's the solution:

                  主页.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:

                  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:

                  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 地方和自动填充位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!

                  上一篇:如何删除输入类型中的默认颜色? 下一篇:使用 ionic 2 而不是 typescript 应用程序创建一个

                  相关文章

                  最新文章

                  <legend id='gXn9e'><style id='gXn9e'><dir id='gXn9e'><q id='gXn9e'></q></dir></style></legend>
                    • <bdo id='gXn9e'></bdo><ul id='gXn9e'></ul>
                  1. <small id='gXn9e'></small><noframes id='gXn9e'>

                  2. <i id='gXn9e'><tr id='gXn9e'><dt id='gXn9e'><q id='gXn9e'><span id='gXn9e'><b id='gXn9e'><form id='gXn9e'><ins id='gXn9e'></ins><ul id='gXn9e'></ul><sub id='gXn9e'></sub></form><legend id='gXn9e'></legend><bdo id='gXn9e'><pre id='gXn9e'><center id='gXn9e'></center></pre></bdo></b><th id='gXn9e'></th></span></q></dt></tr></i><div id='gXn9e'><tfoot id='gXn9e'></tfoot><dl id='gXn9e'><fieldset id='gXn9e'></fieldset></dl></div>

                    <tfoot id='gXn9e'></tfoot>