Question

我无法确定将第三方库（例如Google Maps JavaScript API）导入UI5应用程序的最佳方法。到目前为止，我已经考虑过以下方法：

在<script>中使用index.html标记，例如
<script src="https://maps.googleapis.com/maps/api/js?key=api_key"></script>
这在本地测试时有效，但正如this SAP博文中提到的那样，从SAP Fiori Launchpad启动的应用程序通过Component.js启动，而不是index.html
同一博客文章提到通过sap.ui.define导入图书馆，这实际上是我在应用程序中已经使用moment.js做的事情。问题是Google Maps API不公开全局实例名称/不包含可导入的单个JS文件，因此导入失败。去年6月曾问过similar question，但没有得到答复。
对同一问题的评论提到使用require.js导入Google Maps API。这可能会起作用，但看起来像是一个黑客。感觉应该有一些特定于UI5的方法，而不必导入另一个第三方库。
最后，this SAP博文建议在窗口加载后手动创建Google地图导入<script>标记并将其附加到DOM中。这似乎也是一种黑客攻击，但可能是暂时实现这一目标的唯一方法。

任何帮助确定实现这一目标的正确方法都将受到赞赏！

Answer 1

好吧，我会这样做：

为地图创建自定义控件（最好来自sap.ui.core.HTML）;
在此控件的init方法中，通过向页面添加脚本标记来加载GoogleMaps（此处不需要加载事件，因为此代码执行时页面已加载）;
在此新控件的renderer中，创建一个div，其中将呈现地图;
HTML控件具有非常重要的属性 - ＆＃34; preferDOM＆＃34;，必须将其设置为true，否则，当UI5呈现周期发生时，GoogleMap将被销毁并再次创建，在这种情况下是非常糟糕的用户体验。

Answer 2

在UI5应用中实施谷歌地图的方式有很多：

如果您使用的是SAPUI5：您可以配置通用地图集成控件，以便将谷歌地图用作提供者： https://sapui5.hana.ondemand.com/#/entity/sap.ui.vbm.GeoMap https://sapui5.hana.ondemand.com/#/entity/sap.ui.vk.MapContainer
如果您使用的是OpenUI5，您可能会对自定义控件中包含google API的社区库感兴趣： https://github.com/jasper07/openui5-googlemaps
如果您需要其他东西，可以直接注入谷歌的JavaScript，如上面的海报所述，并将地图注入应用程序，但可能不够灵活。您始终可以创建一个简单的自定义控件，为地图渲染空div，并将其与maps API连接，以通过Google API提供地图。

但是，请注意Google TOS，他们可能需要许可才能在您的代码中高效地使用地图API。

玩得开心，迈克尔

Answer 3

我最终做了以下操作，这似乎提供了预期的结果：

jQuery.sap.includeScript(
    "https://maps.googleapis.com/maps/api/js?key=api_key",
    "includeGoogleMaps",
    function () {
        // Do things
    }
);

我在以下Stack Overflow问题中找到了这个解决方案：

如果建议的解决方案有任何问题，请告诉我。

正确导入Google Maps API到UI5应用程序

3 个答案: