简介
传单支持弹出窗口。当点击地图上的标记或指定区域时，将出现包含文本的弹出窗口。这提供了一种在地图上显示附加信息的方法。
<$>[备注] 注意： 这是关于使用角度和传单的四部分系列的第三部分。 <$>
在本教程中，您将学习如何使用服务来管理弹出窗口逻辑，从而将弹出窗口添加到地图中。
前提条件
要完成本教程，您需要：
- 本教程直接基于以前的parts.]中的安装和步骤
第一步-创建弹出窗口服务
现在，你应该在Angular应用程序中有一个可以工作的Leaflet实现。
使用您的终端窗口导航到项目目录。然后，运行以下命令以生成新服务：
1npx @angular/cli generate service popup --skip-tests
这将创建一个新文件：popup.service.ts。
接下来，将这个新服务作为提供者添加到您的app.mode.ts中。
在代码编辑器中打开app.mode.ts并进行以下更改：
1[label src/app/app.module.ts]
2import { NgModule } from '@angular/core';
3import { BrowserModule } from '@angular/platform-browser';
4
5import { HttpClientModule } from '@angular/common/http';
6import { MarkerService } from './marker.service';
7import { PopupService } from './popup.service';
8
9import { AppComponent } from './app.component';
10import { MapComponent } from './map/map.component';
11
12@NgModule({
13 declarations: [
14 AppComponent,
15 MapComponent
16 ],
17 imports: [
18 BrowserModule,
19 HttpClientModule
20 ],
21 providers: [
22 MarkerService,
23 PopupService
24 ],
25 bootstrap: [AppComponent]
26})
27export class AppModule { }
您的应用程序现在支持您的新PopupService。
第二步-展示弹出窗口
在代码编辑器中打开新创建的popup.service.ts。并声明一个make CapitalPopup函数：
1[label src/app/popup.service.ts]
2import { Injectable } from '@angular/core';
3
4@Injectable({
5 providedIn: 'root'
6})
7export class PopUpService {
8 constructor() { }
9
10 makeCapitalPopup(data: any): string { }
11}
该函数将创建包含来自第2部分中使用的GeoJSON文件的数据的弹出窗口。
添加大写字母的名称、状态和人口：
1[label src/app/popup.service.ts]
2import { Injectable } from '@angular/core';
3
4@Injectable({
5 providedIn: 'root'
6})
7export class PopUpService {
8 constructor() { }
9
10 makeCapitalPopup(data: any): string {
11 return `` +
12 `<div>Capital: ${ data.name }</div>` +
13 `<div>State: ${ data.state }</div>` +
14 `<div>Population: ${ data.population }</div>`
15 }
16}
然后，您需要重新访问MarkerService并导入PopupService：
1[label src/app/marker.service.ts]
2import { Injectable } from '@angular/core';
3import { HttpClient } from '@angular/common/http';
4import * as L from 'leaflet';
5import { PopupService } from './popup.service';
并注入PopupService：
1[label src/app/marker.service.ts]
2constructor(
3 private http: HttpClient,
4 private popupService: PopupService
5) { }
通过将服务添加到app.modes.ts中的Providers节中，您可以将服务创建为整个应用程序的单一提供者，因此ANGLE不会抱怨依赖关系。
在MarkerService文件中添加bindPopup()方法：
1[label src/app/marker.service.ts]
2makeCapitalCircleMarkers(map: L.map): void {
3 this.http.get(this.capitals).subscribe((res: any) => {
4 const maxVal = Math.max(...res.features.map(x => x.properties.population), 0);
5
6 for (const c of res.features) {
7 const lat = c.geometry.coordinates[0];
8 const lon = c.geometry.coordinates[1];
9 const circle = L.circleMarker([lon, lat], {
10 radius: MarkerService.ScaledRadius(c.properties.population, maxVal)
11 });
12
13 circle.bindPopup(this.popupService.makeCapitalPopup(c.properties));
14
15 circle.addTo(map);
16 }
17 });
18}
保存您的更改。然后，停止您的应用程序并重新启动它。在您的Web浏览器(本地主机：4200)中打开应用程序，并与其中一个标记进行交互：
奥斯汀的信息
您现在有了一个支持弹出窗口的地图。
结论
在这篇文章中，您创建了一个构建弹出窗口的弹出窗口服务。您学习了如何使用L.bindPopup将弹出窗口附加到标记。
继续关于使用ANGLE和Leaflet.的本系列文章的第4部分