Ionic 电容谷歌Map自定义图标将无法工作,除非其https://

ggazkfy8  于 2023-11-15  发布在  Ionic
关注(0)|答案(2)|浏览(132)

我正在使用电容器与谷歌Map包,并不能得到一个自定义图标为我的标记(在Android上)为我的生活。它在网络上工作正常,首先。这是一件轻而易举的事。问题是当我设置“iconUrl”为标记,然后部署到Android。
Android可以使用远程URL(https://),但其他都不行。我已经尝试了从文件系统的本地路径,结果来自writeFile()响应:

let data = await Filesystem.writeFile({
                        path: `${marker.icon}.png`, // 'test.png',
                        data: marker.pngUrl.split(',')[1], // base64 encoded from canvas.toDataURL('image/png')
                        directory: Directory.Documents,
                        recursive: true, // ideally it would be in a folder path
                        // encoding: Encoding.UTF8, // leave empty for base64
                    });
marker.iconUrl = data.uri;

字符串
任何我能想到的变化,我已经尝试过了。我不明白我做错了什么,或者如果最新版本的谷歌Map现在不能做到这一点?我对这里的一些代码印象不深(比如相机动画功能,它在任何地方都可以显示,但实际上除了接收这些信息之外,它并没有在代码中。然后它什么也不做)我也不是一个android开发人员,所以检查代码看看有什么问题没有帮助。
任何帮助都将不胜感激。我的最终目标最初是保持svg的在应用程序中作为文本使用尽可能少的空间。显然谷歌Map将采取svg,但只是不从电容虽然。所以我一直试图将我的svg转换为png,然后使用那些与像画布API的东西。所以如果有人有一个答案svg,这将是最好的,但我会采取任何东西!
来自package.json的相关版本:

"@capacitor/assets": "^2.0.4",
"@ionic/lab": "^3.2.15",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.20.4",

"@capacitor/android": "^5.1.1",
"@capacitor/app": "^5.0.6",
"@capacitor/cli": "^5.2.2",
"@capacitor/core": "^5.1.1",
"@capacitor/filesystem": "^5.1.4",
"@capacitor/geolocation": "^5.0.5",
"@capacitor/google-maps": "^5.3.3",
"@capacitor/ios": "^5.1.1",
"@ionic/cli": "^7.1",
"@ionic/core": "^7.5",
"@trapezedev/configure": "^7.0.10",
"dotenv": "^16.3.1",
"ionic-svelte": "^0.5.81",
"native-run": "^1.7.2"


注意事项:我也看到一个不同版本的谷歌Map有从“@capacitor-community/google-maps”,也许我应该使用它?看起来像一样的东西真的除了它如何集成。再次任何建议将有所帮助。只需要自定义图像图标!

kulphzqa

kulphzqa1#

**您收到任何错误消息了吗?**调试此问题的一个好方法是在模拟器或设备上打开应用程序并连接远程调试器。它可以有效地让您在远程设备上使用Chrome开发工具。https://developer.chrome.com/docs/devtools/remote-debugging/#discover
**在你的应用程序中的其他地方也可以使用明文吗?**我相信默认情况下项目设置为只允许外部连接到安全资源(HTTPS)。如果调试器返回错误消息Cleartext HTTP Traffic Not Permitted,这很可能是你的问题。

这个答案可以帮助你解决这个问题:https://stackoverflow.com/a/68222928/19024729

最后一个问题你提到试图加载本地资源,这是不工作,所以我不希望明文阻止这一点,这是很可能的,你可能有一个不同的问题!

Keep me updated:)

ru9i0ody

ru9i0ody2#

所以这里的答案是,由于像android这样的应用程序的打包方式以及webview如何能够“服务”网址,没有一种方法可以在飞行中创建一个图像,然后在电容器中使用谷歌Map(至少现在还没有)。这里唯一可能的事情就是在构建之前生成png并将它们合并到包中。这样做会给给予图像一个在android/app/src/main/assets/public,然后只需将iconUrl参数设置为“image.png”即可将它们作为标记图标引用。
我的意思是,这真的很糟糕,因为这个包会因为可以生成而不是打包的图像而变得臃肿。原生谷歌Map不会阻止你使用各种图像,但电容器还没有出现。
有一件事是非常误导的,代码说你可以像这样引用图像:

iconUrl: 'assets/icon/pin.png',

字符串
但这会让人感到困惑,因为如果你使用Filesktop API并像Documents.Data文件夹一样查看内部,你会发现一个assets目录。
我可以说,使用base64的数据URL的能力(原生谷歌Map可以做到)将使这1000倍更容易。希望他们在未来添加它,我可以从我的应用程序中删除一些膨胀。
这是一个很好的学习经验,我不会再抱怨了,因为离子电容器项目正在拯救我的屁股,现在非常感谢的家伙!

相关问题