如何使用AngularJS在你的应用程序中添加谷歌地图和标记

我们的目标是在Angular应用程序中添加一个Google Map和一个Marker。当用户点击地图上的某个特定位置时，标记将被添加到该特定位置。为了达到这个目标，我们将使用AGM（Angular Google Maps）和它的组件，这将使解决方案非常简单。

什么是Angular Google Maps (AGM)？
AngularJS提供了Angular谷歌地图组件，用于在应用程序中集成谷歌地图服务。AGM有可以直接在应用程序中使用的组件。

方法和解决方案：使用Angular Google Maps的步骤如下。

使用以下命令安装AGM到你的本地angular项目。

npm install @agm/core --save

生成一个API密钥来使用这些服务。
进入https://developers.google.com/maps/documentation/javascript/get-api-key，按照所有步骤创建一个API密钥。
确保你的API已经启用，要启用你的API，请按照这个链接的步骤https://support.google.com/googleapi/answer/6158841?hl=en。
将AgmCoreModule导入到你的应用程序中

import { AgmCoreModule } from '@agm/core';

添加AgmCoreModule.forRoot，你必须把创建的API密钥放到apiKey（apiKey: “你的API密钥在这里”）。

imports: [
    AgmCoreModule.forRoot({
      apiKey:"your API key here"
    })
]

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey:"your API Key"
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在HTML文件中，组件选择器agm-map被用来介绍地图，其中纬度和经度被绑定到变量latitude和longitude。点击地图即(mapClick)事件是用来传递事件的函数，其中包含点击地图的经纬度坐标。

对于标记agm-marker选择器，在这里，相同的纬度和经度被绑定到本地变量。
app.component.html:

<agm-map [latitude]="latitude" [longitude]="longitude" 
      (mapClick)="location($event)">
  <agm-marker [latitude]="latitude" [longitude]="longitude">
</agm-marker>
</agm-map>

在TypeScript文件中，定义了一个函数，该函数接收坐标并将其绑定到一个局部变量，用于在地图的点击处设置标记。
app.component.ts:

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  latitude=51.678418;
  longitude=7.809007;
  location(x){
    this.latitude=x.coords.lat;
    this.longitude=x.coords.lng;
  }
}

输出：运行开发服务器以获得地图，并点击地图将标记添加到你想要的位置。
如何使用AngularJS在你的应用程序中添加谷歌地图和标记？