在Angular 2谷歌地图(AGM Core)中获取当前位置的最简方法

嗨，作为刚接触Ionic和Angular的新手，我完全懂你想快速搞定这个需求的心情！下面是一步步的最简实现方案：

1. 安装必要依赖 #

首先确保你安装了AGM核心库和Ionic的Geolocation插件（如果是Capacitor项目可以替换为@capacitor/geolocation，这里先讲传统Ionic Native的通用方式）：

npm install @agm/core @ionic-native/geolocation @ionic-native/core

2. 配置模块 #

在你的app.module.ts中导入AGM和Geolocation模块，并添加到对应配置项里：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgmCoreModule } from '@agm/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

import { AppComponent } from './app.component';
import { HomePage } from './home/home.page';

@NgModule({
  declarations: [AppComponent, HomePage],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: '你的谷歌地图API密钥' // 替换成你自己的有效API Key
    })
  ],
  providers: [Geolocation], // 注入Geolocation服务
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件中实现定位逻辑 #

以home.component.ts为例，注入Geolocation服务，获取当前位置并绑定到地图的经纬度变量：

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  // 设个默认经纬度（比如谷歌总部），避免加载时地图空白
  lat: number = 37.4220;
  lng: number = -122.0841;

  constructor(private geolocation: Geolocation) { }

  ngOnInit() {
    this.getCurrentLocation();
  }

  getCurrentLocation() {
    this.geolocation.getCurrentPosition().then((resp) => {
      // 获取到位置后更新经纬度
      this.lat = resp.coords.latitude;
      this.lng = resp.coords.longitude;
    }).catch((error) => {
      console.log('获取位置失败', error);
    });
  }
}

4. 模板中渲染AGM地图 #

在home.page.html里添加AGM地图标签，绑定我们的经纬度变量，还可以加个标记点突出当前位置：

<ion-content>
  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="15" style="height: 100vh;">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
</ion-content>

重要提示 #

• 记得在谷歌云平台启用Maps JavaScript API，否则地图无法正常加载
• 设备端要开启定位权限：
  • Android：在AndroidManifest.xml中添加权限声明

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    

  • iOS：在Info.plist中添加权限说明

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>需要访问你的位置来显示地图</string>
    

这样就能快速把设备当前位置显示在AGM地图上啦，是不是很简单😉

内容的提问来源于stack exchange，提问作者Yuu