如何以正确的方式在组件中获取角度/谷歌地图参考

Question

我使用

@angular/google-maps": "^17.3.5"

和 Angular

"^17.3.5"

我尝试获取我的谷歌地图的参考

  <google-map #map mapId="map" height="100%" width="100%" [options]="options"</google-map>

来自我的组件。然而，

@ViewChild(GoogleMap) map!: GoogleMap;

似乎不起作用。当我尝试在

ngAfterViewInit()

中使用它时：

  ngAfterViewInit(): void {

    this.map.googleMap!.fitBounds({
      north: 43.516034,
      south: 43.423021,
      east: 5.471529,
      west: 5.456153,
    });
  }

我得到：

ERROR TypeError: Cannot read properties of undefined (reading 'googleMap')

使用

mapInitialized

似乎有效，但是，然后我只得到

google.map.Map

而不是

GoogleMap

。我不确定这在某种程度上是否是一个缺点。

  <google-map #map (mapInitialized)="initMap($event)" mapId="map" height="100%" width="100%" [options]="options"></google-map>`

组件：

map!: google.maps.Map


initMap(map: google.maps.Map) {
    this.map = map;
    this.initAdvancedMarkers()
  }

  async initAdvancedMarkers() {

    const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    let markers = [
      {
        lat: 43.516034,
        lng: 5.471529,
      },
      {
        lat: 43.523021,
        lng: 5.456153,
      },
      {
        lat: 43.423021,
        lng: 5.456153,
      },
    ];

    let bounds = new google.maps.LatLngBounds();

    // Set markers and fit bounds to show all markers
    markers.forEach((marker: any) => {
      new AdvancedMarkerElement({
        map: this.map,
        position: marker
      });
      bounds.extend(
        new google.maps.LatLng(marker.lat, marker.lng)
      );
    });

    this.map.fitBounds(bounds);
  }

我找不到使用当前版本的谷歌地图执行此操作的正确示例，因此任何正确方向的提示将不胜感激。

Answer 1

问题不可重现，请确保

@if

或

*ngIf

中没有 google 地图元素，这可能会阻止您访问它！

否则您可以尝试切换静态标志并检查它是否解决您的问题！

@ViewChild(GoogleMap, { static: true }) map!: GoogleMap;
// or
@ViewChild(GoogleMap, { static: false }) map!: GoogleMap;

工作 stackblitz，其中视图子项正常出现，如下！

完整代码：

import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { GoogleMap } from '@angular/google-maps';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GoogleMap],
  template: `
    <!-- google-maps-demo.component.html -->
<google-map 
  height="400px"
  width="750px"
  [center]="center"
  [zoom]="zoom"
  (mapClick)="moveMap($event)"
  (mapMousemove)="move($event)" />

<div>Latitude: {{display?.lat}}</div>
<div>Longitude: {{display?.lng}}</div>
  `,
})
export class App {
  @ViewChild(GoogleMap, { static: true }) map!: GoogleMap;
  center: google.maps.LatLngLiteral = { lat: 24, lng: 12 };
  zoom = 4;
  display!: google.maps.LatLngLiteral | undefined;

  ngAfterViewInit(): void {
    console.log(this.map);
    this.map.googleMap!.fitBounds({
      north: 43.516034,
      south: 43.423021,
      east: 5.471529,
      west: 5.456153,
    });
  }

  moveMap(event: google.maps.MapMouseEvent) {
    this.center = <google.maps.LatLngLiteral>event.latLng?.toJSON();
  }

  move(event: google.maps.MapMouseEvent) {
    this.display = event.latLng?.toJSON();
  }
}

bootstrapApplication(App);

Stackblitz 演示