AGM 缩放到标记

AGM (Angular Google Maps) 是一个在 Angular 应用中集成 Google Maps 的插件。AGM 提供了一些非常方便的功能，其中之一是可以在地图上缩放到特定的标记。这在需要在地图上集中显示特定位置时非常有用，尤其是当地图上有多个标记时。

要实现缩放到标记的功能，您需要使用 AGM 库中的 agm-map 组件和 agm-marker 组件。以下是实现该功能的步骤。

1. 导入 AGM 库

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

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

2. 在组件中设置地图中心

在您的组件中，您需要设置地图的中心点，并在地图加载时设置该中心点。

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

@Component({
  selector: 'app-map',
  template: `
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapReady)="onMapReady($event)">
      <!-- Your markers here -->
    </agm-map>
  `
})
export class MapComponent {
  lat = 51.678418;
  lng = 7.809007;
  zoom = 8;
  map: any;

  onMapReady(map) {
    this.map = map;
    this.setMapCenter();
  }

  setMapCenter() {
    // Set the map center here
  }
}

在 onMapReady 回调中，我们将 map 对象存储在变量 this.map 中。然后，在 setMapCenter 方法中，我们可以设置地图中心点。

3. 在标记上设置点击事件

为了触发缩放到标记的功能，我们需要在标记上设置一个点击事件，在该事件中，我们会将地图中心点设置为被点击标记的位置。以下是设置标记的示例代码。

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

@Component({
  selector: 'app-map',
  template: `
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapReady)="onMapReady($event)">
      <agm-marker *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lng" (markerClick)="onMarkerClick($event)">
        <agm-info-window>{{ marker.info }}</agm-info-window>
      </agm-marker>
    </agm-map>
  `
})
export class MapComponent {
  lat = 51.678418;
  lng = 7.809007;
  zoom = 8;
  map: any;
  markers = [
    { lat: 51.678418, lng: 7.809007, info: 'Marker 1' },
    { lat: 51.678526, lng: 7.846951, info: 'Marker 2' },
    { lat: 51.661393, lng: 8.016481, info: 'Marker 3' }
  ];

  onMapReady(map) {
    this.map = map;
    this.setMapCenter();
  }

  setMapCenter() {
    // Set the map center here
  }

  onMarkerClick(marker: AgmMarker) {
    this.map.setCenter({ lat: marker.latitude, lng: marker.longitude });
  }
}

在 onMarkerClick 方法中，我们使用 this.map.setCenter 方法将地图中心点设置为被点击标记的位置。

现在，当您在地图上点击标记时，地图将缩放到该标记，使其成为地图的中心点。

以上是 AGM 缩放到标记的实现步骤。如果您还没有尝试过使用 AGM 与 Angular 应用程序配合使用 Google Maps，请尝试使用它们来创建功能强大的地图应用程序！