简介
Google Maps是Google提供的一项地图服务，支持多种配置设置。将Google Maps添加到应用程序中可以为用户提供比街道地址或一组坐标更多的上下文信息。
角度谷歌地图是为角度应用程序提供工具以利用谷歌地图API的组件。
在本教程中，您将使用@agm/core库并创建一个带有标记的地图。
前提条件
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
- 熟悉设置角度project和使用角度components可能会有所帮助。
- A谷歌地图Java脚本接口Key. -这将需要一个谷歌账户。 -登录谷歌云平台控制台。 -创建新项目。 -为项目启用Google Maps Java脚本API。 -以及为API密钥创建凭据。
<$>[备注]
注意： 为了避免在使用Google Maps API时出现仅用于开发目的的消息，您需要提供有效的信用卡并与Google Cloud Project的帐单帐户关联，但本教程不需要提供信用卡。
<$>
本教程通过Node v14.13.1、npmv6.14.8、angularv10.1.5、@agm/corev1.1.0进行验证。
第一步-设置项目
您可以使用@ANGLE/CLI创建一个新的角度投影。
在您的终端窗口中，使用以下命令：
1npx @angular/cli new angular-google-maps-example --style=css --routing=false --skip-tests
这将配置一个新的角度项目，将样式设置为)，不布线，并跳过测试。
导航到新创建的项目目录：
1cd angular-google-maps-example
在您的工程文件夹中，运行以下命令安装@agm/core：
1npm install @agm/[email protected]
<$>[备注]
注： 目前有最新版本3.0.0-beta.0发布。如果您选择使用此版本，还需要安装@type/googlemaps。
然而，在验证本教程的过程中，我们遇到了一些问题，需要使用@Types/googlemaps(v3.39.12)的降级版本，并最终降级[@agm/(v1.1.0)](https://github.com/SebastianM/angular-google-maps/issues/1855)Core`以正确使用矩形形状。
<$>
在您的代码编辑器中打开app.mode.ts，修改后支持@agm/core：
1[label src/app/app.module.ts]
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4import { AgmCoreModule } from '@agm/core';
5
6import { AppComponent } from './app.component';
7
8@NgModule({
9 declarations: [
10 AppComponent
11 ],
12 imports: [
13 BrowserModule,
14 AgmCoreModule.forRoot({
15 apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'
16 })
17 ],
18 providers: [],
19 bootstrap: [AppComponent]
20})
21export class AppModule { }
请务必将Your_Google_Maps_API_Key_Goes_Here‘替换为您的实际API密钥。
<$>[警告] 警告： 请务必避免将您的API密钥保存在您提交给公共存储库的任何文件中(如GitHub)，否则它可能会被其他人用于您不想要的目的。 <$>
当应用程序准备好使用@agm/core后，您可以创建一个自定义组件来使用它。
第二步-构建示例地图组件
现在，您可以创建自定义地图组件：
1npx @angular/cli generate component MyAgmExample --flat=true --inlineStyle=true --inlineTemplate=true
这将在src/app目录中创建一个新的MyAgmExample组件，而不需要单独的CSS文件或HTML模板文件。它还会将这个新组件添加到app.mode.ts中。
打开新的MyAgmExample.Component.ts文件，修改为使用agm-map：
1[label src/app/MyAgmExample.component.ts]
2import { Component, OnInit } from '@angular/core';
3
4@Component({
5 selector: 'my-agm-example',
6 template: `
7 <agm-map
8 [latitude]="lat"
9 [longitude]="lng"
10 [mapTypeId]="mapType"
11 >
12 </agm-map>
13 `,
14 styles: [
15 'agm-map { height: 300px; }'
16 ]
17})
18export class MyAgmExampleComponent implements OnInit {
19 lat = 21.3069;
20 lng = -157.8583;
21 mapType = 'satellite';
22
23 constructor() { }
24
25 ngOnInit(): void { }
26}
这将创建一个新地图，其类型为sat ite，atitude位于21.3069，经度位于-157.8583(夏威夷檀香山)。
<$>[备注]
注意： 必须在css中显式设置agm-map元素的高度。
<$>
修改app.Component.html即可使用这个新的my-agm-example组件：
1[label src/app/app.component.html]
2<my-agm-example></my-agm-example>
然后，启动应用程序以观察到目前为止的情况。
1npm start
在Web浏览器中访问应用程序时，您应该会看到以夏威夷火奴鲁鲁为中心的带有卫星视图的Google地图。
第三步-使用标记和边界构建高级地图组件
在<agm-map>组件的模板中，您可以添加许多其他组件。您还可以设置其他一些配置选项。本教程将只介绍在地图上绘制形状，但值得查看Full documentation》中的所有可用选项。
用纬度和经度值初始化<agm-map>组件将使地图在该特定坐标上居中。但是，您也可以在地图上的任何位置放置任意数量的标记和形状。
打开MyAgmExample.Component.ts文件，修改为使用agm-marker和agm-matle：
1@Component({
2 selector: 'my-agm-example',
3 template: `
4 <agm-map
5 [latitude]="lat"
6 [longitude]="lng"
7 [zoom]="2"
8 (mapClick)="addMarker($event.coords.lat, $event.coords.lng)"
9 >
10 <agm-marker
11 *ngFor="let marker of markers"
12 [latitude]="marker.lat"
13 [longitude]="marker.lng"
14 [opacity]="marker.alpha"
15 [markerDraggable]="true"
16 (markerClick)="selectMarker($event)"
17 >
18 </agm-marker>
19 <agm-rectangle
20 [north]="max('lat')"
21 [east]="max('lng')"
22 [south]="min('lat')"
23 [west]="min('lng')"
24 >
25 </agm-rectangle>
26 </agm-map>
27 <p *ngIf="selectedMarker">
28 Lat: {{ selectedMarker.lat }} Lng: {{ selectedMarker.lng }}
29 </p>
30 `,
31 styles: [
32 'agm-map { height: 300px; }'
33 ],
34})
35
36export class MyAgmAdvancedExample {
37 lat = 48.75606;
38 lng = -118.859;
39
40 selectedMarker = null;
41
42 markers = [
43 // These are all just random coordinates from https://www.random.org/geographic-coordinates/
44 { lat: 22.33159, lng: 105.63233, alpha: 1 },
45 { lat: 7.92658, lng: -12.05228, alpha: 1 },
46 { lat: 48.75606, lng: -118.859, alpha: 1 },
47 { lat: 5.19334, lng: -67.03352, alpha: 1 },
48 { lat: 12.09407, lng: 26.31618, alpha: 1 },
49 { lat: 47.92393, lng: 78.58339, alpha: 1 }
50 ];
51
52 addMarker(lat: number, lng: number) {
53 this.markers.push({ lat, lng, alpha: 0.4 });
54 }
55
56 max(coordType: 'lat' | 'lng'): number {
57 return Math.max(...this.markers.map(marker => marker[coordType]));
58 }
59
60 min(coordType: 'lat' | 'lng'): number {
61 return Math.min(...this.markers.map(marker => marker[coordType]));
62 }
63
64 selectMarker(event) {
65 this.selectedMarker = {
66 lat: event.latitude,
67 lng: event.longitude
68 };
69 }
70}
首先，您已经在地图本身设置了两个额外的属性：zoom的输入和mapClick的事件处理程序。Zoom告诉最初显示地图的距离；0是显示的最远距离，根据地图的位置和类型，它最高可达约22。当用户点击地图上的某个地方时，mapClick就会发出一个事件。在本例中，当用户单击地图时，它会向地图添加一个新标记。
记号笔就像地图上的大头针。它们具有以下特点：
atitude和Longitude是必填项opacity，用于更改标记的透明程度markerDraggable，允许用户在地图周围单击、按住和拖动标记markerClick，允许您在用户单击单个标记时处理事件
在本教程中，markerClick将触发addMarker，该addMarker将丢弃一个带有不同opacity的新引脚。
该代码有一个数组来保存地图的所有标记。这个数组已经被几个随机位置填充。
您还向地图中添加了一个矩形形状。矩形的边界--‘北’、‘南’、‘东’和‘西’--是通过标记的所有纬度和经度的最远端来计算的。基于此计算，每当添加新标记时，如果该标记位于绘制的矩形之外，则该矩形将重画到其新的外边。
还有AgmPolygon、AgmCircle、AgmPolyLine。最后，AgmDataLayer允许您使用GeoJSON在地图上绘制这些要素。
<$>[警告] 警告： 一旦您完成实验，建议您登录Google Cloud Console并删除API密钥，并删除关联的计费帐户，以避免潜在的滥用。 <$>
现在，您就拥有了一个带有标记和矩形形状的Google地图。
结论
在本教程中，您学习了如何在Angular应用程序中使用@agm/core和Google Maps API功能。
这具有很大的潜力，可以向游客显示企业、旅游目的地和兴趣点的位置。
如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。