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

Posted 2023-04-14

【中文标题】带有 Googlemap 静态 api 的 Nativescript - iOS 上的问题

【英文标题】：Nativescript with Googlemap static api - issue on iOS

【发布时间】：2020-07-14 06:08:46

【问题描述】：

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

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

在我的 vue 数据中，我有 map_source: "https://maps.googleapis.com/maps/api/staticmap?&markers=48.2,2.1&path=color:red|weight:5|fillcolor:red|48.2,2.1|48.3,2.13|48.4,2.12&zoom=10&size=460x200&key=MY_API_KEY"

当我在浏览器中使用这个 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 上显示图像

【参考方案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;
);