使用物理设备或模拟器时无法在 Ionic / Capacitor 上加载 Google Maps JS API（在浏览器上工作正常）

Question

我正在尝试在 Ionic-Angular 应用程序上使用 maps JS API，该应用程序需要在物理设备和 Web 浏览器上使用。目标是使用地图自动完成和其他两个带有地图的组件构建一个输入字段（在本例中使用 @angular/google-maps s）。

在浏览器上它工作完美，但在设备或模拟器上 API 未加载。

通过使用遗留脚本导入谷歌地图API，一切都可以在网络上完美运行，如果使用动态导入，同样的事情。

旧版导入

 <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places,geocoding"></script>

动态导入

   <script type="text/javascript">
      ((g) => {
        var h,
          a,
          k,
          p = "The Google Maps JavaScript API",
          c = "google",
          l = "importLibrary",
          q = "__ib__",
          m = document,
          b = window;
        b = b[c] || (b[c] = {});
        var d = b.maps || (b.maps = {}),
          r = new Set(),
          e = new URLSearchParams(),
          u = () =>
            h ||
            (h = new Promise(async (f, n) => {
              await (a = m.createElement("script"));
              e.set("libraries", [...r] + "");
              for (k in g)
                e.set(
                  k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()),
                  g[k],
                );
              e.set("callback", c + ".maps." + q);
              a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
              d[q] = f;
              a.onerror = () => (h = n(Error(p + " could not load.")));
              a.nonce = m.querySelector("script[nonce]")?.nonce || "";
              m.head.append(a);
            }));
        d[l]
          ? console.warn(p + " only loads once. Ignoring:", g)
          : (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
      })({
        v: "weekly",
        key: MY_API_KEY,
      });
    </script>

自然地，我将导入放置在标签的末尾。

但是，在模拟器和物理设备上（iOS 和 Android 之间没有区别），无论使用哪种方法，JS api 都无法正确加载。

使用旧版导入时出错：

Could not load "places_impl". at HTMLScriptElement.__zone_symbol__ON_PROPERTYerror

。

动态导入时出错

The Google Maps JavaScript API could not load

我认为这可能是 API 密钥的限制，但这配置为没有限制，实际上尝试在另一个离子应用程序中使用它，（但在本例中使用 @capacitor/google-maps）它可以工作正确。

在旧版导入的情况下，我以这种方式在服务中获取自动完成和地理编码 Api

  private autocomplete = new google.maps.places.AutocompleteService();
  private geocoder = new google.maps.Geocoder();

在动态导入的情况下，我以这种方式在服务中获取自动完成和地理编码 Api

  private autocomplete?: google.maps.places.AutocompleteService;
  private geocoder?: google.maps.Geocoder;

  constructor() {
    this.initialize();
  }

  private async initialize(): Promise<void> {
    if (this.autocomplete && this.geocoder) return;

    const [places, geocoding] = await Promise.all([
      google.maps.importLibrary('places') as Promise<google.maps.PlacesLibrary>,
      google.maps.importLibrary(
        'geocoding',
      ) as Promise<google.maps.GeocodingLibrary>,
    ]);

    this.autocomplete = new places.AutocompleteService();
    this.geocoder = new geocoding.Geocoder();
  }

Answer 1

在API限制中尝试选择这两个选项， 适用于 Android 的地图 SDK 地图 JavaScript API