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

Question

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

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

有一个关于如何使用静态网页集成地图的示例：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 包含那些脚本内容？另外，我如何才能将地理坐标动态传递给 java 脚本函数？

（我不想为此使用任何 vaadin 插件，因为我只是想显示地图）。

Answer 1

您可以在 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 class（您的组件）这个 class 应该是这样的：

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);
    }
        };

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

Answer 2

我真的不明白为什么你不能使用插件，所以你应该使用它：

Google Maps Add-on

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

How to integrate google-maps in a vaadin page?

javascript

java

google-maps

vaadin