使用 Ionic 包装 Angular2 应用程序 - 地理定位问题

Posted 2023-02-23

【中文标题】使用 Ionic 包装 Angular2 应用程序 - 地理定位问题

【英文标题】：Wrapping an Angular2 App with Ionic - Geolocation Issues

【发布时间】：2016-10-21 00:54:12

【问题描述】：

我有一个现有的、响应式的 Angular 2 应用程序，我想使用 Ionic 打包并部署到应用商店。该应用程序将在两种网络浏览器上运行，并且作为原生应用程序在 iOS 和 Android 上运行。

我现在已经基本解决了这个问题，但有一个问题。我需要在我的第一个屏幕上使用geolocation，而我的网络应用程序使用navigator.geolocation.getCurrentPosition 执行此操作，正如您所期望的那样。这在网络上非常有效，请求用户许可，然后执行geolocation。

在 ios 版本中，在我标记 cordova-plugin-geolocation 后，我也可以弹出一条消息以允许地理定位，但此消息使用长路径

("/var/containers/bundle/application/GUID/APPNAME/www/index.html" 想使用您当前的位置）。

这看起来很老套，很业余，老实说，我可能会删除任何给我这样消息的应用程序。我试图弄清楚如何让这条消息说出我的应用程序的名称。以下是我尝试过的一些事情...

添加NSLocationWhenInUseUsageDescription 是我plist 文件的变体。这导致我收到应用程序的消息 先命名，然后收到第二条带有路径的消息。 在我的 Angular 2 应用程序中导入“ionic-native”并尝试使用 Geolocation 作为包装器 - 没有变化 等待“deviceready”事件进行地理定位——没有变化 在进行地理定位之前使用 setTimeout 设置较长的延迟（最长 30 秒） -- 无变化

我讨厌我必须有两个代码库才能通过应用商店分发渠道部署一个简单的网络应用程序的想法。当然，有一些我还没有想到的解决方法。有什么建议吗？

【参考方案1】：

所以，这实际上有点简单。构建的 index.html 文件只需要具有 ionic javascript 引用，如下所示：

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>

我修改了我的 gulp 文件，该文件由 webpack build for ionic 处理，以便在结束 head 标记之前将它们放入，现在我对地理定位的调用可以使用正确的消息传递。

navigator.geolocation.getCurrentPosition((pos) =>  
   //do things with pos
);