谷歌地图在 Ionic 2 应用程序中不起作用

Posted 2023-03-13

【中文标题】谷歌地图在 Ionic 2 应用程序中不起作用

【英文标题】：Google Maps not working in Ionic 2 application

【发布时间】：2017-12-17 03:34:13

【问题描述】：

当我尝试在 Ionic 2 应用程序中加载谷歌地图 API 时，我收到此错误：

未捕获（承诺中）：TypeError：无法读取 null 的属性“firstChild” TypeError：无法在新 ug 的 Object._.pg (http://maps.google.com/maps/api/js?key=AIzaSyBOclEsMjwSHU-ec6OoGo6BB3FM91ixnJ0:85:391) 处读取 null 的属性 'firstChild'

这些是我的导入语句：

  import  Platform, NavController, ModalController,IonicPage, NavParams  
  from 'ionic-angular';
  import  from '@types/googlemaps';
  import  GoogleMap,  GoogleMapsEvent, LatLng  from '@ionic-native/google-
  maps';

这些是我运行的命令：

1)npm install --save @ionic-native/google-maps 2)npm install @types/google-maps --save-dev --save-exact

   <script src="http://maps.google.com/maps/api/js?key='AIzaSyBOclEsMjwSHU-
   ec6OoGo6BB3FM91ixnJ0'"></script>

还与所有其他脚本引用一起添加到 index.html 中标记的末尾。 （如您所见，我还获得了一个 API 密钥，我添加了带单引号和不带单引号的密钥，但仍然出现相同的错误）

我使用 Sublime Text 3，在运行应用程序之前，我没有在代码中看到任何突出显示（下划线）的错误。

为什么会出现此错误，我该如何解决？

【参考方案1】：

首先，为什么要为原生谷歌地图插件包含一个网络脚本 Api？

如果您想使用原生谷歌地图，请按照以下步骤操作

Ionic Native Google Maps

当脚本在 Dom 元素之前加载时会发生此错误。请重新启动项目并使用原生谷歌地图插件。

如果您想使用 Google Maps Js Library，请按照本教程进行操作

Ionic 2 how to use google maps

谢谢

【讨论】：

谢谢！ Josh Morony 的教程（Ionic 2 如何使用谷歌地图）奏效了

@sidharthramanan 如果您觉得有帮助，请将其标记为答案 :) 谢谢