ionic 2 - Native Geocoder forwardResult 和 reserveResult 不工作
ionic 2 - Native Geocoder forwardResult and reserveResult not working
尝试根据数据库中用户的邮政编码在地图上生成标记,但一开始就卡住了。
我正在遵循以下示例:
GitHub
尝试了 ionic 文档中的方法,但似乎效果不佳。使用 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>
TypeScript
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);
});
}
您需要通过注入对象访问该函数,而不是 class NativeGeocoder
。
做:
this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818)
.then((result: NativeGeocoderReverseResult)=>{
//...
}).catch((error: any) => console.log(error));
与 forwardGeocode
函数类似。
它们不是要由 class.
访问的 static 函数
尝试根据数据库中用户的邮政编码在地图上生成标记,但一开始就卡住了。
我正在遵循以下示例: GitHub
尝试了 ionic 文档中的方法,但似乎效果不佳。使用 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>
TypeScript
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);
});
}
您需要通过注入对象访问该函数,而不是 class NativeGeocoder
。
做:
this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818)
.then((result: NativeGeocoderReverseResult)=>{
//...
}).catch((error: any) => console.log(error));
与 forwardGeocode
函数类似。
它们不是要由 class.