javascript - 如何在 vaadin 页面中集成 google-maps？-6ren

javascript - 如何在 vaadin 页面中集成 google-maps？

转载作者：行者123 更新时间：2023-11-30 16:44:42

24

4

我要嵌入 google-maps在现有的 vaadin 中网页。

问题:vaadin是用java写的，所以没有html或 javascript行被编码。

有一个关于如何使用静态网页集成 map 的示例:https://developers.google.com/maps/documentation/javascript/examples/map-simple

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" />
  </body>
</html>

如您所见，这需要 <script>页面内的内容。

问题:如何使用 vaadin 包含那些脚本内容？另外，我如何才能将地理坐标动态传递给 javascript 函数？

(我不想为此使用任何 vaadin 插件，因为我只是想显示 map )。

最佳答案

您可以在 vaadin 中创建自定义组件，并在自定义组件的构造函数中调用 javascript 代码。说起来容易做起来难，所以您应该这样做:

Vaadin-UI 页面:

protected void init(VaadinRequest request) {
        /****************************************************
         * Create instance of custom component and set an id
         ***************************************************/
        Map mapobject = new Map();
        mapobject.setId("mapob");
        ..
        ..
        ..
        ..
       }

然后创建一个名为 Map.java 的新 java 类(您的组件)这个类应该是这样的:

import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({ "myscript.js", "https://maps.googleapis.com/maps/api/js?v=3.exp"})
@StyleSheet({ "mystyle.css" })

//Extend AbstractJavaScriptComponent
public class Map extends AbstractJavaScriptComponent {

    float param1=123;
    float param2=456;
    public Map() {
       callFunction("myfunction",param1,param2); //Pass parameters to your function
    }

}

现在，最后一步是创建您已链接的 js 和 css 文件。

创建 --> myscript.js 和 mystyle.css 文件

按原样在 css 中定义所有样式

在您的 JS 中，按如下方式定义您的函数:

window.your_package_name_Map = function() { //Put correct package name

      this.myfunction = function(latitude, longitude) {     //Accept the parameters
         var map;

            //mapob is the id of your component
            map = new google.maps.Map(document.getElementById("mapob"), { 
            zoom: 8,
            center: {lat: latitude, lng: longitude}
              });
            google.maps.event.addDomListener(window, 'load', initialize);
    }
        };

这应该可以做到。我希望我没有错过任何东西

关于javascript - 如何在 vaadin 页面中集成 google-maps？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31425796/

24

4

0

文章推荐： c# - 如何在 Azure 应用服务中运行 .EXE

文章推荐： c - 如何用 C 语言实现这种外部合并排序算法？

文章推荐： python - 尝试将 XTea 加密算法从 C 移植到 Python

文章推荐： c# - ASP.Net Core 使用什么依赖注入(inject)框架？

vaadin - Vaadin 中的缓存问题
我有一个示例应用程序，包含以下三个步骤输入用户详细信息 -> 个人详细信息 -> 完成当我点击一个链接时，它会调用我的 vaadin 应用程序。问题是一旦我的三步过程完成，当我再次尝试点击我的 v
vaadin - Vaadin 中的中央错误处理
我希望框架捕获每个未捕获的异常并显示适当的通知消息。因此我在我的 UI 中设置了一个自定义的 ErrorHandler(灵感来自“Book of Vaadin”:https://vaadin.com
vaadin - vaadin 表变量中单元格的高度
我在 Vaadin 有一张 table 。一列是 String 类型，因此其大小是可变的。因此，我想让列的宽度固定(具有扩展比率)，但每行的高度应该是可变的(根据其内容 - 字符串)。即，这是预期的
vaadin - Vaadin 的图表组件
有谁知道用于 vaadin 框架的数据可视化(图表、饼图等)的任何 UI 组件库？最佳答案我建议 dChart: https://vaadin.com/directory#!addon/dchar
vaadin - 更改网格中单元格的颜色(Vaadin)
我在 Grid 中使用 BeanItemContainer 来显示我的数据。我需要根据单元格中的数据分别为每个单元格着色。最佳答案 section about the Grid在 Vaadin 的书
vaadin - 更改布局的背景颜色 - Vaadin
在我的一个应用程序中，我创建了一个页脚: public Footer(){ hl.setHeight("120px"); hl.setWidth("100%");
vaadin - Vaadin 表中的延迟加载？
是否有任何特定方法可以在 Vaadin 表中实现分页/延迟加载。我试图找到一些文档，但我找不到。最佳答案使用Viritin add-on及其 MTable 组件。 I 是最有效的(服务器资源副)
vaadin - Vaadin 图表中的标签格式
我正在尝试使用 Vaadin Charts 创建饼图。这段代码为图表添加了漂亮的标签，但小数点 t 后两位数字就足够了。 dataLabels.setFormatter("''+ this.poi
vaadin - vaadin 表中的错误显示
我是 vaadin 框架的新手，一切正常，直到......表头没有正确显示，......我正在开发一个在 exoplatform 上运行的 portlet，我正在使用 vaadin 6，我的表只显示第
vaadin - vaadin 中的页面加载事件
我有一个带有基于复杂查询填充数据的表的页面(即使我使用分页也需要很多时间)。我使用 BeanItemcontainer 将数据加载到表中。现在遇到问题，我希望以异步方式将数据加载到表中(在用户屏幕上加
vaadin - 在 Vaadin 14 中，如何将我的 Vaadin 页面嵌入到另一个网页中？
我有一个现有的应用程序(在 WebGuiToolkit.org 中编写)，我正在尝试在其中嵌入一个 Vaadin 14 页面。我看过几个 Vaadin 8 指南，比如 https://vaadin.
java - 更改 vaadin 版本和 vaadin 插件版本后 Vaadin 构建失败
更改pom.xml文件的vaadin版本号和vaadin插件版本号后构建失败 7.4.5 7.4.5 然后我尝试清理并重建项目，但显示构建失败: Copying 3 resources --- va
vaadin - 如何在 Vaadin Upload 中设置 vaadin-upload-file 组件的样式
我想通过更改文件列表中元素的外观来设置 Vaadin Upload 组件 (vaadin-upload) 的样式，例如隐藏命令按钮(开始、删除、重试)。文件列表包含 vaadin-upload-fil
vaadin - 如何向 Vaadin 组件添加悬停文本？
如何向文本字段、选项卡、链接、标签等添加悬停文本(即当我将鼠标悬停在组件上时出现的包含一些解释或详细信息的文本框) 我用谷歌搜索并浏览了“Book of Vaadin”和“Building Moder
vaadin - 如何滚动到 Vaadin 网格中当前选定的行？
this.grid.asSingleSelect().addValueChangeListener(event -> { if (!Objects.isNull(event.getVa
vaadin - 如何查找选项卡是否已在 Vaadin 中打开并将其设置为事件状态而不是创建新选项卡
在 Vaadin 中，一旦您有了 TabSheet，并且已经打开了一些选项卡，您就不会希望多次打开包含相同内容的同一个 Tab。如何检查选项卡是否已打开并将其设置为选定的选项卡？最佳答案默认情况
vaadin - 如何为 Vaadin 表中的特定列设置字体大小？
我已经使用 vaadin 创建了表格。现在我想为该表格中的特定列内容设置字体大小。是否可以为该表格中的特定列设置字体大小？。如果是这样，请给我设置字体大小的想法。如果你能提供我一些代码片段。最佳答
vaadin - 是否可以在 Vaadin 中以百分比设置列宽？
是否可以在 vaadin 中以百分比设置表格的列宽。如果可以，请告诉我如何使用示例代码片段来做到这一点。提前谢谢。最佳答案是的。为此使用 Table.setColumnExpandRatio(co
vaadin - 无需重新启动应用程序即可重新加载 Vaadin UI
我正在开发 Vaadin 8 UI。目前，每次修改 UI 时，我都必须重新启动我的应用程序。有没有更好的办法？我曾尝试附加 Java 调试器并使用 IntelliJ 的 Reload Changed
vaadin - 了解Vaadin流程/Vaadin 10
序言:我是Vaadin的高级开发人员(我用过6、7，现在我的所有项目都已迁移到Vaadin 8)。我开始学习Vaadin 10/Flow，但发现自己在一些热水中。我实际上在挣扎的是“项目”本身。

首页

博学

6Ren·AI

商城

javascript - 如何在 vaadin 页面中集成 google-maps？