如何在 vaadin 页面中集成谷歌地图？答案

【问题标题】：How to integrate google-maps in a vaadin page?如何在 vaadin 页面中集成谷歌地图？
【发布时间】：2015-07-15 08:56:16
【问题描述】：

我想将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 插件，因为我只是想显示地图）。

【问题讨论】：

您在演示页面上看到过他们是如何做到的吗？ demo.vaadin.com/parking
我收到以下错误：Ooops... You accessed Parking with a browser that is not supported. Parking is meant to be used with modern WebKit based mobile browsers.我的页面主要是桌面浏览器访问的网页。
啊。那这个怎么样？ demo.vaadin.com/sampler/#foundation/execute-javascript
我知道我可以强制执行 JS 命令。但是我需要一些可以放置整个 JS 脚本内容的东西，然后通过传递 lat/lng 来调用它。

标签： javascript java google-maps vaadin

【解决方案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);
    }
        };

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

【讨论】：

关于这种方法的一些问题：JS类中是否需要window.*？ callFunction("myfunction"); 是什么？
我尝试了以下，但没有显示警报：demo_test_MapsComponent = function() { this.myfunction = function() { alert("hello"); } };
是的，窗户。是必不可少的，这可能就是您没有收到警报的原因。
也试过window.demo_test_MapsComponent，但没有显示警报。
callFunction() 是一个 java 函数，它调用范围内定义的 Javascript 函数。 myfunction 只是您将在 JS 文件中定义的函数的名称。您已在 JS 中将其定义为 this.myfunction=function{}

【解决方案2】：

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

Google Maps Add-on

【讨论】：

插件通常会随着时间的推移而停产，而且我只需要一张没有附加功能的普通地图。因此，我当然不会依赖社区插件。