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

笔记首页 >> 教程系列 >> 如何将 Angular 中的谷歌地图与 Angular 谷歌地图集成

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

介绍

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

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

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

先决条件

要完成本教程，您需要：

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

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

本教程已通过 Node v14.13.1、npmv6.14.8、angularv10.1.5 和@agm/corev1.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

这将MyAgmExample在src/app目录中创建一个没有单独的 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 { }
}

这将创建一个类型为satellite、latitudeat21.3069和longitudeat -157.8583(Honolulu, Hawaii)的新地图。

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

修改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 地图。

结论

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

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

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

觉得文章有用？

点个广告表达一下你的爱意吧！