Angular Google 地图教程：快速指南

npm 安装-g @angular/cli

ng 新的 angular-google-mapscd angular-google-maps

npm 安装@agm/核心npm i @types/ googlemaps@3.39.13

从'@angular/core'导入{NgModule}；从'@agm/core'导入{AgmCoreModule}；从'@angular/platform-browser'导入{BrowserModule}；
 从'./app-routing.module'导入{AppRoutingModule}；从 './app.component' 导入 { AppComponent }；
 @NgModule({
  声明：[
    应用组件
  ],
  进口：[
    浏览器模块，
    应用路由模块，
    AgmCoreModule.forRoot({
      密钥：''
    })
  ],
  供应商：[]，
  引导程序：[AppComponent]})导出类 AppModule { }

从'@angular/core'导入{组件}；@成分（{
  选择器：'app-root'，
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']})导出类 AppComponent {
  // 谷歌地图缩放级别
  缩放：数字 = 8；
 
  // 地图的初始中心位置
  纬度：数字 = 51.673858；
  lng: 数字 = 7.815982;
 
  点击标记（标签：字符串，索引：数字）{
    console.log(`点击标记：${label || index}`)
  }
 
  标记 = [
      {
          纬度：51.673858，
          液化天然气：7.815982，
          标签：“A”，
          可拖动：真
      },
      {
          纬度：51.373858，
          液化石油气：7.215982，
          标签：“乙”，
          可拖动：假
      },
      {
          纬度：51.723858，
          液化石油气：7.895982，
          标签：“C”，
          可拖动：真
      }
  ]}

<h2>Angular Google 地图 (AGM) 演示</h2>
 <agm地图
  [纬度] =“纬度”
  [经度]="lng"
  [缩放] =“缩放”
  [disableDefaultUI]="false" >
 
  <agm-标记
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [纬度]="m.lat"
      [经度]="m.lng"
      [标签]="m.标签"
      [markerDraggable]="m.draggable">
     
    <agm-info-window>
      <strong>标签：{{m.label}}</strong><br/>
      <strong>纬度：{{m.lat}}</strong><br/>
      <strong>经度：{{m.lng}}</strong>
    </agm-信息窗口>
   
  </agm-标记>
 </agm-地图>

agm地图{
    高度：500px；}

npm 开始