这个问题可能重复，或者其他一些问题已经回答了我想要的答案，但无论如何我还是会问..这是一个非常基本的问题，但是我也想要最简单的方法
我想做的是获取执行我的应用程序的设备的当前位置。.我已经看到了使用地理位置的其他答案，但是我不太了解如何将其实现到AGM，因为我对Ionic还是很陌生和棱角分明，我想知道是否可能有更简单的方法来实现这一目标...
您的回答将不胜感激
这是我的代码：HTML
<ion-header>
<ion-navbar>
<ion-title>viewmapings</ion-title>
<ion-buttons end>
<button ion-button (click)="onClose()">Close</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<agm-map
[latitude]="lat"
[longitude]="lng"
(mapClick)="onClickLoc($event)"
[disableDoubleClickZoom] = "true"
[streetViewControl] = "false"
[zoom]="15">
<agm-marker
[latitude]="clickedLat"
[longitude]="clickedLng"
*ngIf="selected">
<agm-info-window>Lat: {{clickedLat}} <br> Lng: {{clickedLng}}</agm-info-window>
</agm-marker>
</agm-map>
</ion-content>
SCSS：
page-viewmapings {
agm-map{
height: 100%;
}
}
TS：
import { Component } from '@angular/core';
import { IonicPage, NavController, ViewController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-viewmapings',
templateUrl: 'viewmapings.html',
})
export class ViewmapingsPage {
lat: number = 51.678418;
lng: number = 7.809007;
clickedLat: number;
clickedLng: number;
selected = false;
constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ViewmapingsPage');
}
onClickLoc(event){
this.clickedLat = event.coords.lat;
this.clickedLng = event.coords.lng;
this.selected = true;
}
onClose(){
this.viewCtrl.dismiss()
}
}
我在一个项目中做了类似的事情。我的建议是创建一个负责以下内容的服务：
geo-location.service.ts
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class GeoLocationService {
coordinates: any;
constructor() { }
public getPosition(): Observable<Position> {
return Observable.create(
(observer) => {
navigator.geolocation.watchPosition((pos: Position) => {
observer.next(pos);
}),
() => {
console.log('Position is not available');
},
{
enableHighAccuracy: true
};
});
}
}
然后，您可以在应用程序中的任何位置轻松使用它：
coordinates;
ngOnInit() {
this.geoLocationService.getPosition().subscribe(
(pos: Position) => {
this.coordinates = {
latitude: +(pos.coords.latitude),
longitude: +(pos.coords.longitude)
};
});
}
}
并与agm一起使用：
<agm-map
[latitude]="coordinates.latitude"
[longitude]="coordinates.longitude"
[zoom]="10">
</agm-map>
您可以跳过创建服务的过程，但这确实有用，并且可以使您观察到，因此您的位置会对其进行更改。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句