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

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

1. 地图组件的添加

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

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

2. 兴趣点的表示

每个兴趣点由一个图钉表示，可以用纬度、经度坐标以及名称来表示。纬度表示某点距离赤道的南北距离，赤道为 0，正数表示在赤道以北，负数表示在赤道以南。经度表示某点距离地球垂直中心线（通常经过伦敦格林威治）的东西距离，向东移动数字为正，向西移动数字为负。

表示兴趣点的模型如下：

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

在创建这个模型的实例时，我们将使用 GUID 来表示它。由于 GUID 是唯一的