谷歌地图在 Vaadin 14

【问题标题】：Google Maps in Vaadin 14谷歌地图在 Vaadin 14
【发布时间】：2020-07-13 17:43:24
【问题描述】：

我有兴趣将 Google 地图放入 Vaadin 14（在 PWA 应用中）。我已经看到 Vaadin 8 有很多插件，显然不适用于 Vaadin 10+。环顾四周，我没有找到任何东西，然后我问你是否有任何插件已经准备好？我还看到了 Web 组件 (https://vaadin.com/directory/component/googlewebcomponentsgoogle-map)。我从未接触过 Polymer 的世界，只接触过 Java。我想知道：如果我想使用它，如何在 Vaadin 14 UI 中开始使用它？如果可能的话，一个小的演示或示例。我在 Vaadin 指南中搜索，但我不太了解。

【问题讨论】：

我不认为有谷歌地图的例子，但这里有一个很棒的（工作和测试的）Leaflet 插件：Project example for integrating a JS library with Vaadin 14+。也许你可以改用这个:)

标签： javascript java polymer vaadin vaadin-flow

【解决方案1】：

您的问题过于宽泛，无法在此处给出确切的技术答案，但我可以列出资源以供探索。

Vaadin Forum 有关于集成该 Web 组件的讨论，您可以找到指向 GitHub 示例的指针 https://vaadin.com/forum/thread/17235558/maps-leaflet-google-map这里还有一些关于它的额外cmets https://vaadin.com/forum/thread/17842727/getting-started-with-vaadin-14-and-google-maps

但是，该 Web 组件存在一个主要问题。它是为 Polymer 2 制作的，因此您只能在 Vaadin 14 compatibility mode 中使用它，而在 npm 模式下它不可用。该组件未维护，没有Polymer 3 版本可用npm loadable resource。

所以还有另一种方法，即使用与 Vaadin 8 插件相同的 JavaScript 库和 API。确实有一个社区项目。我还没有测试，但很有趣。您可以在this forum page 上找到更多信息。

【讨论】：