如何将Angular中的谷歌地图与Angular谷歌地图集成

介绍

Google Maps 是 Google 提供的地图服务，支持多种配置设置。将 Google 地图添加到您的应用程序可以为用户提供比街道地址或一组坐标更多的上下文信息。

Angular Google Maps 是为 Angular 应用程序提供工具以利用 Google Maps API 的组件。

在本教程中，您将使用 @agm/core 库并创建带有标记的地图。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
熟悉设置 Angular 项目和使用 Angular 组件可能会有所帮助。
Google Maps JavaScript API 密钥。这将需要一个 Google 帐户。登录 Google Cloud Platform Console。创建一个新项目。为项目启用 Google Maps JavaScript API。并为 API 密钥创建凭据。

注意： 为避免在使用 Google Maps API 时出现“仅用于开发目的”消息，您需要提供有效的信用卡并与 Google Cloud 项目的结算帐户相关联，但不是本教程需要。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.5 和 @agm/core v1.1.0 进行了验证。

第 1 步 — 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中，使用以下命令：

npx @angular/cli new angular-google-maps-example --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目，其样式设置为“CSS”（与“Sass”、“Less”或“Stylus”相对）、无路由和跳过测试。

导航到新创建的项目目录：

cd angular-google-maps-example

在您的项目文件夹中，运行以下命令来安装 @agm/core：

npm install @agm/core@1.1.0

注意： 目前有一个现代版本 3.0.0-beta.0 版本。如果您选择使用此版本，您还应该安装 @types/googlemaps。

但是，在验证本教程的过程中，我们遇到了需要使用 @types/googlemaps (v3.39.12) 的降级版本并最终降级 @agm/core (v1.1.0) 的问题使用矩形形状没有错误。

在代码编辑器中打开 app.module.ts 并修改它以支持 @agm/core：

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请务必将 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE' 替换为您的实际 API 密钥。

警告： 请务必避免将您的 API 密钥保存在您提交到公共存储库（如 GitHub）的任何文件中，因为它可能会被其他人用于您不打算的目的。

随着应用程序准备好使用 @agm/core，您可以创建自定义组件来使用它。

第 2 步 — 构建示例地图组件

现在，您可以创建自定义地图组件：

npx @angular/cli generate component MyAgmExample --flat=true --inlineStyle=true --inlineTemplate=true

这将在 src/app 目录中创建一个新的 MyAgmExample 组件，而无需单独的 CSS 文件或 HTML 模板文件。它还将这个新组件添加到 app.module.ts。

打开新的 MyAgmExample.component.ts 文件并修改它以使用 agm-map：

src/app/MyAgmExample.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-agm-example',
  template: `
    <agm-map
      [latitude]="lat"
      [longitude]="lng"
      [mapTypeId]="mapType"
    >
    </agm-map>
  `,
  styles: [
    'agm-map { height: 300px; }'
  ]
})
export class MyAgmExampleComponent implements OnInit {
  lat = 21.3069;
  lng = -157.8583;
  mapType = 'satellite';

  constructor() { }

  ngOnInit(): void { }
}

这将在 21.3069 和 -157.8583（夏威夷檀香山）创建一个类型为 satellite、latitude 和 longitude 的新地图。

注意：必须在CSS中明确设置agm-map元素的高度。

修改 app.component.html 以使用这个新的 my-agm-example 组件：

src/app/app.component.html

<my-agm-example></my-agm-example>

然后，启动应用程序以观察您到目前为止所拥有的内容。

npm start

在 Web 浏览器中访问您的应用程序时，您应该会看到以夏威夷檀香山为中心的带有卫星视图的 Google 地图。

第 3 步 — 构建带有标记和边界的高级地图组件

在 <agm-map> 组件的模板中，您可以添加许多其他组件。您还可以设置一些其他配置选项。本教程将仅涵盖在您的地图上绘制形状，但非常值得查看完整文档关于您可用的所有选项。

使用纬度和经度值初始化 <agm-map> 组件将使地图以该特定坐标为中心。但是，您也可以在地图上的任何位置放置任意数量的标记和形状。

打开 MyAgmExample.component.ts 文件并修改它以使用 agm-marker 和 agm-rectangle：

@Component({
  selector: 'my-agm-example',
  template: `
    <agm-map
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="2"
      (mapClick)="addMarker($event.coords.lat, $event.coords.lng)"
    >
      <agm-marker
        *ngFor="let marker of markers"
        [latitude]="marker.lat"
        [longitude]="marker.lng"
        [opacity]="marker.alpha"
        [markerDraggable]="true"
        (markerClick)="selectMarker($event)"
      >
      </agm-marker>
      <agm-rectangle
        [north]="max('lat')"
        [east]="max('lng')"
        [south]="min('lat')"
        [west]="min('lng')"
      >
      </agm-rectangle>
    </agm-map>
    <p *ngIf="selectedMarker">
      Lat: {{ selectedMarker.lat }} Lng: {{ selectedMarker.lng }}
    </p>
  `,
  styles: [
    'agm-map { height: 300px; }'
  ],
})

export class MyAgmAdvancedExample {
  lat = 48.75606;
  lng = -118.859;

  selectedMarker = null;

  markers = [
    // These are all just random coordinates from https://www.random.org/geographic-coordinates/
    { lat: 22.33159, lng: 105.63233, alpha: 1 },
    { lat: 7.92658, lng: -12.05228, alpha: 1 },
    { lat: 48.75606, lng: -118.859, alpha: 1 },
    { lat: 5.19334, lng: -67.03352, alpha: 1 },
    { lat: 12.09407, lng: 26.31618, alpha: 1 },
    { lat: 47.92393, lng: 78.58339, alpha: 1 }
  ];

  addMarker(lat: number, lng: number) {
    this.markers.push({ lat, lng, alpha: 0.4 });
  }

  max(coordType: 'lat' | 'lng'): number {
    return Math.max(...this.markers.map(marker => marker[coordType]));
  }

  min(coordType: 'lat' | 'lng'): number {
    return Math.min(...this.markers.map(marker => marker[coordType]));
  }

  selectMarker(event) {
    this.selectedMarker = {
      lat: event.latitude,
      lng: event.longitude
    };
  }
}

首先，您在地图本身上设置了两个附加属性：zoom 的输入和 mapClick 的事件处理程序。缩放告诉最初显示地图的远近或远近； 0 是显示的最远距离，根据地图的位置和类型，它会上升到大约 22。每当用户单击地图上的某个位置时，mapClick 都会发出一个事件。在此示例中，当用户单击地图时，它会向地图添加一个新标记。

标记就像地图上的图钉。它们具有以下特征：

需要 latitude 和 longitude
opacity 改变标记的透明度
markerDraggable 允许用户在地图上单击、按住和拖动标记
markerClick 允许您在用户单击单个标记时处理事件

在本教程中，markerClick 将触发 addMarker，这将丢弃一个具有不同 opacity 的新引脚。

该代码有一个数组来保存地图的所有标记。这个数组已经填充了几个随机位置。

您还向地图添加了一个矩形。矩形的边界 - north、south、east 和 west - 由标记的所有纬度和经度的最远极端计算. 基于此计算，每当添加新标记时，如果它位于绘制的矩形之外，则矩形将重新绘制到其新的外边缘。

还提供 AgmPolygon、AgmCircle、AgmPolyLine。最后，AgmDataLayer 允许您使用 GeoJSON 在地图上绘制任何这些特征。

警告： 完成实验后，建议您登录 Google Cloud Console 并删除 API 密钥并删除关联的计费帐户，以避免潜在的误用。

您现在有了一个带有标记和矩形形状的 Google 地图。

结论

在本教程中，您学习了如何在 Angular 应用程序中使用 @agm/core 和 Google Maps API 功能。

这具有向访问者显示企业、旅游目的地和兴趣点位置的巨大潜力。

如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。