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

Question

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

问题：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包含这些脚本内容？ 再加上如何将地理坐标动态传递给javascript函数？

（我不想为此使用任何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类（您的组件），该类应类似于以下内容：

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附加组件

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-07-15 10:23:03

解决方案2
-1 2015-07-15 15:46:51

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-07-15 10:23:03

解决方案2 -1 2015-07-15 15:46:51

解决方案1
3 已采纳 2015-07-15 10:23:03

解决方案2
-1 2015-07-15 15:46:51