如何使用AngularJS将Google Map和Marker添加到您的应用程序中？

目的是在Angular应用程序中添加Google Map和Marker。当用户单击地图上的特定位置时，标记将添加到该特定位置。为了达到目标，我们将使用AGM(角度Google Maps)及其组件，使解决方案非常容易。

什么是Angular Google Maps(AGM)?
AngularJS提供了Angular Google Maps组件，用于在应用程序中集成Google Maps服务。 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=zh_CN
• 将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：

• 在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;
    }
  }
  

输出：运行开发服务器以获取地图，然后单击地图以将标记添加到所需的位置。