Angular Leaflet 是一个用于在 Angular 应用中使用 Leaflet 地图库的桥接库，而 Angular Google 地图则是一个用于在 Angular 应用中使用 Google 地图的桥接库。以下是使用这两个框架创建地图的示例代码：

Angular Leaflet 地图示例代码：

1. 安装依赖：

npm install leaflet @asymmetrik/ngx-leaflet

2. 在 app.module.ts 中导入和配置 Leaflet 模块：

import { LeafletModule } from '@asymmetrik/ngx-leaflet';

@NgModule({
  imports: [
    LeafletModule
  ]
})
export class AppModule { }

3. 在组件中使用 Leaflet 地图：

import { Component } from '@angular/core';
import { latLng, tileLayer } from 'leaflet';

@Component({
  selector: 'app-map',
  template: '
'
})
export class MapComponent {
  ngOnInit() {
    const map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('A pretty CSS3 popup.
 Easily customizable.')
      .openPopup();
  }
}

Angular Google 地图示例代码：

1. 安装依赖：

npm install @agm/core

2. 在 app.module.ts 中导入和配置 Google 地图模块：

import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_API_KEY'
    })
  ]
})
export class AppModule { }

3. 在组件中使用 Google 地图：

import { Component } from '@angular/core';

@Component({
  selector: 'app-map',
  template: ''
})
export class MapComponent {
  lat = 51.678418;
  lng = 7.809007;
  zoom = 13;
}

请注意，上述示例代码中的 API 密钥需要替换为您自己的 Google 地图 API 密钥。这些示例代码只是为了演示如何在 Angular 应用中使用 Angular Leaflet 地图和 Angular Google 地图，您可能需要根据自己的需求进行更多的配置和自定义。