在Angular 2 Google地图（AGM Core）中获取当前位置的最简单方法

Question

这个问题可能有重复的内容，或者其他一些问题已经回答了我想要的答案，但是我还是会问。.这是一个非常基本的问题，但是我也想要最简单的方法

我想做的是获取执行我的应用程序的设备的当前位置。.我已经看到了使用地理位置的其他答案，但是我不太了解如何将其实现到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()
  }

}

Answer 1

我在一个项目中做了类似的事情。我的建议是创建一个负责以下内容的服务：

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>

您可以跳过创建服务的过程，但这确实有用，并且可以使您观察到，因此您的位置会对其进行更改。