Angular中使用最简单的方式实现点击谷歌地图获取经纬度

第 1 步：创建 Angular 应用程序

通过执行以下命令在终端上执行以下命令以创建新的Angular应用程序：

// 创建项目
ng new google-map-app
// 进入目录
cd angular-google-map-app

第 2 步：安装 agm/core

然后在终端执行以下命令，通过执行npm命令安装agm依赖包：

npm install @agm/core --save

（agm是angular-google-maps的缩写，github地址，官方文档地址）
打开 tsconfig.app.json文件，然后 在 types 属性下添加 ：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

第 3 步：引入 agm/core 模块

下一步把AgmCoreModule添加到AppModule中。
Google API 密钥：需要前往谷歌控制台获取地图密钥。
添加密钥到配置项：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule } from '@agm/core';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: '你的密钥',
      libraries: ['places']
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

其中libraries属性是用来加载所使用到的地图库，例如：

1. places使您的应用程序能够在定义的区域内搜索地点，例如机构、地理位置或显著的兴趣点。
2. marker允许您向地图添加高度可定制、高性能的高级标记。
3. geometry包括用于计算地球表面标量几何值（例如距离和面积）的效用函数。
4. drawing提供图形界面，供用户在地图上绘制多边形、矩形、折线、圆和标记。

更多的文档可以看谷歌官方API介绍。

第 4 步：更新组件类

定义变量以保存纬度和经度值。前往 app.component.ts 文件并更新以下代码：

//app.component.ts
 
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title: string = '获取经纬度';
  latitude!: number;
  longitude!: number;
 
  @ViewChild('search')
  public searchElementRef!: ElementRef;
 
 
  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) { }
 
 
  ngOnInit() {
    // 地图异步加载
    this.mapsAPILoader.load().then(() => {
    });
  }
 
 /**
 * onMapClicked 在任意区域点击地图都会触发，返回经纬度等信息的Object。
 */
  onMapClicked(event: any){
    console.table(event.coords);
    this.latitude = event.coords.lat;
    this.longitude = event.coords.lng;
  }
}

第 5 步：更新 HTML 模板

打开 app.component.html 文件并修改以下HTML：

<!-- app.component.html -->
<div class="container">
  <h1>Angular 谷歌地图 - 点击谷歌地图获取经纬度</h1>
 
  <agm-map [latitude]="latitude" [longitude]="longitude" (mapClick)="onMapClicked($event)">
  </agm-map>
 
  <div>Latitude: {{latitude}}</div>
  <div>Longitude: {{longitude}}</div>
</div>

第 6 步：运行应用程序

ng serve --port=4300 --open