Angular 15中如何通过查询字符串获取Place坐标并定位地图

方案一：不依赖Map对象，直接通过Place ID获取坐标 #

利用AutocompleteService返回的预测结果中的place_id，调用Places API的Place Details接口获取完整地点信息（包含坐标），无需依赖已初始化的Map对象：

• 步骤：
  1. 在组件模板中定义一个隐藏的DOM元素，用于初始化PlacesService（PlacesService构造函数要求传入HTMLElement参数）
  2. 用户点击typeahead建议时，提取对应place_id，调用getDetails方法获取坐标

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-map',
  template: `<div #hiddenEl style="display: none;"></div>`
})
export class MapComponent implements OnInit {
  private placesService!: google.maps.places.PlacesService;
  @ViewChild('hiddenEl') hiddenEl!: ElementRef;

  ngOnInit(): void {
    // 用隐藏元素初始化PlacesService，无需依赖Map实例
    this.placesService = new google.maps.places.PlacesService(this.hiddenEl.nativeElement);
  }

  onPlaceSuggestionClick(prediction: google.maps.places.AutocompletePrediction): void {
    if (!prediction.place_id) return;

    this.placesService.getDetails({ placeId: prediction.place_id }, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK && place?.geometry?.location) {
        const lat = place.geometry.location.lat();
        const lng = place.geometry.location.lng();
        // 此处可使用坐标执行地图居中操作
        console.log('目标坐标：', lat, lng);
      }
    });
  }
}

方案二：解决Map异步初始化问题，确保调用findPlaceFromQuery时Map已就绪 #

通过RxJS的BehaviorSubject跟踪Map实例的初始化状态，等待Map加载完成后再执行相关操作：

• 步骤：
  1. 定义BehaviorSubject保存Map实例，初始值为null
  2. 在mapInitialized回调中传入已初始化的Map实例
  3. 调用findPlaceFromQuery前，先订阅流确保Map已就绪

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, filter, take } from 'rxjs';

@Component({
  selector: 'app-map',
  template: `<google-map (mapInitialized)="onMapReady($event)"></google-map>`
})
export class MapComponent implements OnInit {
  private mapSubject = new BehaviorSubject<google.maps.Map | null>(null);
  private map$ = this.mapSubject.asObservable().pipe(filter(map => map !== null));

  ngOnInit(): void {}

  onMapReady(map: google.maps.Map): void {
    this.mapSubject.next(map);
  }

  onPlaceSuggestionClick(query: string): void {
    this.map$.pipe(take(1)).subscribe(map => {
      const request = {
        query: query,
        fields: ['geometry']
      };
      map.findPlaceFromQuery(request, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK && results?.length) {
          const targetLocation = results[0].geometry?.location;
          if (targetLocation) {
            map.setCenter(targetLocation);
          }
        }
      });
    });
  }
}

注意事项 #

• 确保Google Cloud控制台已启用Places API，且API密钥拥有对应权限
• 方案一中的隐藏元素无需渲染到可见区域，仅用于满足PlacesService的初始化要求
• 方案二中的take(1)确保仅获取一次已就绪的Map实例，避免重复订阅

内容的提问来源于stack exchange，提问作者noobie