带有 Googlemap 静态 api 的 Nativescript - iOS 上的问题答案

【问题标题】：Nativescript with Googlemap static api - issue on iOS带有 Googlemap 静态 api 的 Nativescript - iOS 上的问题
【发布时间】：2020-07-14 06:08:46
【问题描述】：

我正在尝试在我的 Nativescript 应用程序中添加由谷歌地图静态 api 生成的地图图像（我正在使用带有 Vue 的 Nativescript）。我可以让它在 Android 上运行，但我在 iOS 上遇到了一些问题。

我只是有一个像 <Image :src="map_source" /> 这样的 Image 组件

当我在浏览器中使用这个 URL 时，我得到了想要的地图。当我在 Android 上的应用程序中使用此 URL 时，它会正确显示地图。但是当我在 iOS 设备上的应用程序中使用相同的 URL 时，地图根本不会显示。

注意：如果我删除路径（例如 map_source: "https://maps.googleapis.com/maps/api/staticmap?&markers=48.2,2.1&zoom=10&size=460x200&key=MY_API_KEY"，图像在 Android 和 iOS 上都能正确显示。只有在添加路径时才会出现错误。

这是 iOS 问题还是我做错了什么？

【问题讨论】：

您是否尝试调试 Image 组件内部发生的下载请求，或者使用 fetch / axios 下载图像然后从本地文件加载？
下载图片然后从本地文件加载得到相同的结果
你看到下载的图片了吗？是否按预期下载。因为如果出现问题，Google 可能会在请求中返回错误而不是图像。也许您可以分享一个可以重现问题的 Playground 示例。
我在 iOS 上收到“错误：不支持的 URL”。这是 Playground 示例，您只需将 api_key 放入数据中。 play.nativescript.org/?template=play-vue&id=RoAFzF
好的，我让它工作了，问题是“|”导致“不支持的 URL”的字符。通过在调用imageSourceModule.fromUrl(encoded_url) 之前使用encodeURI(url)，我能够在iOS 上显示图像

标签： ios nativescript nativescript-vue

【解决方案1】：

感谢@Manoj，我能够找到问题所在。在 iOS 设备上，由于“|”，该 URL 不受支持特点。所以我不得不这样编码：

let imageSourceModule = require("tns-core-modules/image-source");
let url = encodeURI("https://maps.googleapis.com/maps/api/staticmap?&markers=48.2,2.1&zoom=10&size=460x200&key=MY_API_KEY")
imageSourceModule.fromUrl(url).then(res => {
    this.map_source = res;
});

【讨论】：