0

尝试根据数据库中用户的邮政编码在地图上生成标记，但一开始就卡住了。

我正在遵循以下示例： GitHub

尝试了离子文档中的方法，但似乎效果不佳。使用ionic serve接收错误消息：

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

我是 ionic 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);
  });

 }
4

1 回答 1

1

您需要通过注入的对象而不是类来访问函数NativeGeocoder。

做：

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

对于forwardGeocode功能也是如此。它们不是类可以访问的静态函数。

于 2017-07-13T09:15:44.623 回答