2017-07-13 4 views
0

データベースのユーザーの郵便番号に基づいてマップ上にマーカーを生成しようとしましたが、開始時にすでに停止しています。私からの例を、以下のいionic 2 - ネイティブジオコーダーforwardResultとreserveResultが機能しない

GitHub

は、イオンのドキュメントからの方法を試みたが、同様に動作するようには思えません。エラーメッセージの受信ionic serveを使用:

ERROR Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3__ionic_native_native_geocoder__.a.reverseGeocode is not a function

を私はどこでした私が間違っていたときにそう、本当にわからない2をイオン性に新しいです。任意の形式のヘルプを歓迎します。事前に感謝:)

HTML

<ion-content padding> 
<p> 
    {{foo}} 
</p> 
<p> 
    {{bar}} 
</p> 

<div #map id="map" style="z-index: 1; position: absolute; top: 0px; left: 0px;"></div> 

</ion-content> 

活字体

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { NavController,ToastController, Platform } from 'ionic-angular'; 
import { Geolocation, Geoposition } from '@ionic-native/geolocation'; 
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

declare var google; 

@Component({ 
selector: 'page-mapview', 
templateUrl: 'mapview.html' 
}) 
export class MapPage { 
bar:string; 
foo:string; 
public listings : any = []; 
constructor(
public navCtrl: NavController, 
public geolocation: Geolocation, 
public nativeGeocoder: NativeGeocoder, 
public toaster: ToastController, 
public http: Http, 
public platform: Platform,) { 

    this.platform.ready().then(() => { 

    NativeGeocoder.reverseGeocode(52.5072095, 13.1452818) 
    .then((result: NativeGeocoderReverseResult) => { 
     this.foo = "The address is " + result.street + " " + result.houseNumber + " in " + result.city + ", " + result.countryCode; 
     console.log("The address is " + result.street + " " + result.houseNumber + " in " + result.city + ", " + result.countryCode); 
    }) 
    .catch((error: any) => console.log(error)); 

    NativeGeocoder.forwardGeocode("139651") 
    .then((coordinates: NativeGeocoderForwardResult) => { 
     this.bar = "The coordinates are latitude=" + coordinates.latitude + " and longitude=" + coordinates.longitude; 
     console.log("The coordinates are latitude=" + coordinates.latitude + " and longitude=" + coordinates.longitude); 
    }) 
    .catch((error: any) => console.log(error)); 

}); 

} 

@ViewChild('map') mapElement: ElementRef; 
map: any; 

/* MAP STARTS HERE */ 
ionViewDidLoad(){ 
this.loadMap(); 
} 


loadMap(){ 

this.geolocation.getCurrentPosition().then((position) => { 

    let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    let mapOptions = { 
    center: latLng, 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    disableDefaultUI: true, 
    } 

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 

    let marker = new google.maps.Marker({ 
    map: this.map, 
    animation: google.maps.Animation.DROP, 
    position: this.map.getCenter() 
    }); 

    let content = "<h4>You are here!</h4>";   

    this.addInfoWindow(marker, content); 

    }, (err) => { 
    console.log(err); 
    }); 

} 

答えて

1

あなたが注入されたオブジェクトではないクラスNativeGeocoderを通じて機能にアクセスする必要があります。

の操作を行います。forwardGeocode機能についても同様

this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818) 
    .then((result: NativeGeocoderReverseResult)=>{ 
//... 
}).catch((error: any) => console.log(error)); 

staticクラスによってアクセスされる機能はありません。

関連する問題