20、基于 Angular 和 Firebase 的云端地图应用开发

基于 Angular 和 Firebase 的云端地图应用开发

1. 添加地图组件

在这一步，我们将创建两个 Angular 组件： MappingcontainerComponent 和 MapViewComponent 。把它们分开创建，是因为 MappingcontainerComponent 用于包含引导基础设施，而 MapViewComponent 仅包含地图本身。当然，你也可以将它们合并，但为了清晰描述各部分的功能，分开创建会更方便。不过，这也意味着我们需要在这两个组件之间进行一些协调，这将强化我们之前所学的 EventEmitter 行为。

在为这些组件添加具体内容之前，我们需要编写一些模型和服务，为地图和数据访问提供基础设施。

2. 兴趣点模型

每个兴趣点由一个图钉表示，可以用纬度和经度坐标以及名称来表示。纬度和经度是地理术语，用于精确确定地球上某一位置。纬度表示某点相对于赤道的南北距离，赤道为 0，正数表示在赤道以北，负数表示在赤道以南；经度表示某点相对于地球垂直中心线（通常穿过伦敦格林威治）的东西距离，向东移动为正数，向西移动为负数。

以下是表示兴趣点的模型：

export class PinModel {
  id: string;
  lat: number;
  long: number;
  name: string;
}

在创建这个模