如何在vaadin页面中集成google-maps？
[英]How to integrate google-maps in a vaadin page?
问题描述
I want to embed google-maps inside an existing vaadin webpage. 
我想将google-maps嵌入现有的vaadin网页中。
Problem: vaadin is written in java, so no html or javascript lines are coded. 问题：vaadin是用Java编写的，因此没有对html或javascript行进行编码。
There is an example on how to integrate maps using a static webpage: https://developers.google.com/maps/documentation/javascript/examples/map-simple 有一个有关如何使用静态网页集成地图的示例： 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>
As you see, this requires <script> stuff inside the page. 如您所见，这需要页面内的<script>内容。
Question: how can I include those script content using vaadin? 问题：如何使用vaadin包含这些脚本内容？ Plus how could I then pass the geocoordinates dynamically to the javascript function? 再加上如何将地理坐标动态传递给javascript函数？
(I don't want to use any vaadin addon for this, as I simple just want to show the map). （我不想为此使用任何vaadin插件，因为我只是想显示地图）。
2 个解决方案
解决方案1
3 已采纳 2015-07-15 10:23:03
You can create a custom component in vaadin, and call the javascript code in the constructor of your custom component. 您可以在vaadin中创建自定义组件，然后在自定义组件的构造函数中调用javascript代码。 This is easier said than done, so here's how you should be doing it: 这说起来容易做起来难，因此，您应该这样做：
Vaadin-UI page: Vaadin-UI页面：
protected void init(VaadinRequest request) {
/****************************************************
* Create instance of custom component and set an id
***************************************************/
Map mapobject = new Map();
mapobject.setId("mapob");
..
..
..
..
}
Then create a new java class with the name Map.java (your component) This class should be something like this: 然后创建一个名为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
}
}
Now, the last step is to create your js and css files which you have linked. 现在，最后一步是创建已链接的js和CSS文件。
Create --> myscript.js and mystyle.css files 创建-> myscript.js和mystyle.css文件
Define all your styling in the css as it is 按原样在CSS中定义所有样式
In your JS, define your function as follows: 在您的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);
}
};
This should do it. 这应该做。 I hope I haven't missed anything 我希望我什么都没错过
解决方案2
-1 2015-07-15 15:46:51
I don't really see why you could not use the addon, so you should use that: 我真的不明白为什么您不能使用插件，所以您应该使用它：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.