Angular18+Ionic8谷歌地图报错：CameraConfig无target属性

这个错误的核心原因是你调用setCamera时传入的配置对象用了错误的属性名——结合Ionic 8的技术栈，你大概率在用Capacitor Google Maps插件，该插件的CameraConfig类型中并没有target属性，正确用来设置地图中心的属性是center。

修复后的代码 #

async onSearch(event: any) {
  const query = event.target.value;

  if (query) {
    // 替换为你自己的谷歌地图地理编码API地址，记得带上有效API密钥
    const geocodeUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(query)}&key=你的API密钥`;
    
    try {
      const response = await fetch(geocodeUrl);
      const data = await response.json();

      if (data.status === 'OK') {
        const location = data.results[0].geometry.location;
        this.map.setCamera({
          center: {
            lat: location.lat,
            lng: location.lng,
          },
          zoom: 15,
        });
      } else {
        console.error('未找到匹配的地址结果。');
      }
    } catch (error) {
      console.error('地理编码请求失败:', error);
    }
  }
}

额外注意事项 #

1. 必须补全geocodeUrl的内容，否则地理编码请求无法正常发起。需要替换你的API密钥为谷歌云平台申请的有效密钥，并确保地理编码API已在后台启用。
2. 如果你的项目用的是纯Angular的@angular/google-maps库，setCamera并非标准方法，此时应改用panTo和setZoom方法：

// 假设this.map是google.maps.Map实例
this.map.panTo({ lat: location.lat, lng: location.lng });
this.map.setZoom(15);

内容的提问来源于stack exchange，提问作者José Manuel Ruíz Bolaños