离子2 - 谷歌的地方，并自动完成位置

Question

我有工作对离子2项目，到目前为止，我已经实现了地图，但我不能离开这一点的。为了将Google Place和自动完成功能添加到项目中，我需要按照自己的方式进行展示。

我该怎么办？

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

} 

有什么不对？ 感谢的

Answer 1

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

Answer 2

使用elementref访问用来代替document.getElementById 尝试离子电池输入：

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

    } 

检查角文档here

Answer 3

如果你需要的是“谷歌地方对象”，那么你的代码可以非常简单像这样：

<ion-item> 
    <ion-label>Search your city</ion-label> 
    <ion-input formControlName="placeAutofill" id="googlePlaces" required></ion-input> 
</ion-item> 

而且在我的代码：

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