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

Question

这个问题可能有重复问题，或者我想要的答案已经在其他一些问题中得到了回答，但我还是会问。这是一个非常基本的问题，但我也想要最简单（最简单）的方法如何实现这一点

我想做的是获取执行我的应用程序的设备的当前位置。我已经看到其他使用地理定位的答案，但我不太明白如何将它实现到 AGM，因为我'我对 ionic 和 angular 很陌生，我想知道是否有更简单的方法来实现这个...

非常感谢您的回答

这是我的代码： 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>

您可以跳过创建服务，但它确实很有用，并且可以观察到，因此您的位置会更新它的变化。

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

simplest way to get current location in Angular 2 Google Maps (AGM Core)

ionic-framework

angular2-google-maps