Ionic 在Angular 2 Google Maps(AGM Core)中获取当前位置的最简单方法

ghg1uchk 于 2022-12-16 发布在 Ionic

关注(0)|答案(2)|浏览(195)

这个问题可能重复，或者我想要的答案已经在其他问题中得到了回答，但无论如何我还是要问。这是一个非常基本的问题，但我也希望找到实现这一点的最简单的方法
我想做的是获取执行我的应用程序的设备的当前位置。我已经看到了使用地理定位的其他答案，但我不太明白如何将其实现到AGM，因为我对离子和Angular 相当陌生，我想知道是否有更简单的方法来实现这一点...
您的回答将不胜感激
下面是我的代码：超文本标记语言

<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()
  }

}

ionic-framework

来源：https://stackoverflow.com/questions/49495032/simplest-way-to-get-current-location-in-angular-2-google-maps-agm-core

2条答案

按热度按时间

hl0ma9xz1#

我曾经在一个项目中做过类似的事情，我的建议是创建一个服务来负责这件事：
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-map
          [latitude]="coordinates.latitude"
          [longitude]="coordinates.longitude"
          [zoom]="10">
</agm-map>

你可以跳过创建服务，但它确实很有用，给你和观察，所以你的位置更新它的变化.

赞(0）回复(0）举报 2022-12-16

kqhtkvqz2#

我曾参与过一个类似的项目，在{API-KEY}上放置密钥

this.http.post(`https://www.googleapis.com/geolocation/v1/geolocate?key={API-KEY}`,{}).subscribe(
       {
         next:(res)=>{
           this.currentlocation =res
           this.lat = this.currentlocation.location.lat
           this.lng = this.currentlocation.location.lng
         
          
         
       }
     )

赞(0）回复(0）举报 2022-12-16

我来回答

Ionic 在Angular 2 Google Maps(AGM Core)中获取当前位置的最简单方法

2条答案

相关问题

热门标签

最新问答