我的谷歌MapAPI密钥工作正常,当我硬编码到标签像这样:
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=HARD_CODED_HERE"></script>
</head>
现在,我不想硬编码的价值,我需要得到它从. env文件。
到目前为止,我所做的和尝试的是:
in the main.dart:
js.context['googleMapsApiKey'] = dotenv.env['GOOGLE_MAPS_API_KEY'];
html.document.dispatchEvent(html.CustomEvent("google-maps-api-key-loaded"));
基本上,在index.html中创建一个用于捕获的DOM元素,如下所示:
in the index.html:
<script>
document.addEventListener("google-maps-api-key-loaded", function (){
var googleapis = window.GOOGLE_MAPS_API_KEY;
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=" + googleapis + "&callback=initMap";
script.defer = true;
script.async = true;
document.head.appendChild(script);
});
</script>
问题是这个解决方案只能在web上工作,因为我需要将这些导入到main.dart:
main.dart file:
import 'dart:js' as js;
import 'dart:html' as html;
这将不允许iOS和Android运行,因为这些导入仅适用于Web应用程序。
是否有任何机构采用类似办法?或者有什么解决方案吗?最好不使用额外的 Package 。
谢谢
2条答案
按热度按时间mklgxw1f1#
所以移动的需要应用密钥。
dart为移动的定义应用密钥。您需要输入两次,一次是在vscode启动时,一次是在任务部分。然后在dart中检查是否没有web,并通过dart define读取env键。
agyaoht72#
最后,我找到的解决方案是安装universal_html包:https://pub.dev/packages/universal_html
导入应该如下所示:
我希望这对某人有帮助。