用于google地图的Angular 2 agm库，用于按地点id设置地点

在Angular项目中使用Angular Google Maps (AGM)库可以方便地集成Google Maps

安装AGM库

首先，确保你已经安装了Angular CLI。然后，在你的Angular项目中安装AGM库：

npm install @agm/core --save

配置AGM模块

在你的Angular模块文件（例如app.module.ts）中导入AgmCoreModule并进行配置：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请确保将YOUR_GOOGLE_MAPS_API_KEY替换为你的Google Maps API密钥。

在组件中使用AGM

在你的Angular组件中（例如app.component.ts），你可以使用AGM来按地点ID设置地点。首先，导入必要的模块：

import { Component, OnInit } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

然后，在组件类中定义地点ID，并在ngOnInit生命周期钩子中使用MapsAPILoader来获取地点信息：

@Component({
  selector: 'app-root',
  template: `<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
               <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
             </agm-map>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  latitude: number;
  longitude: number;
  zoom: number = 15;

  constructor(private mapsAPILoader: MapsAPILoader) {}

  ngOnInit() {
    this.getLocationById('YOUR_PLACE_ID');
  }

  getLocationById(placeId: string) {
    this.mapsAPILoader.load().then(() => {
      const geocoder = new google.maps.Geocoder();
      geocoder.geocode({ 'placeId': placeId }, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          const location = results[0].geometry.location;
          this.latitude = location.lat();
          this.longitude = location.lng();
        } else {
          console.error('Geocode was not successful for the following reason: ' + status);
        }
      });
    });
  }
}

请确保将YOUR_PLACE_ID替换为你想要设置的地点ID。

模板

在你的组件模板文件（例如app.component.html）中，添加AGM地图和标记：

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
  <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>