Question

我想向我的vaadin页面添加传单地图。我尝试使用标签，只是将所有html代码添加到其中，但这只给了我一个空字段。甚至可以通过使用标签添加地图吗？还是还有其他方法？

这是我正在使用的相关代码，该地图不是我制作的，它只是用于测试的虚拟地图：

public class MerchantSearchView extends CustomComponent implements View {
private VerticalLayout rootlayout;
private HorizontalLayout buttonlayout;
private CustomLayout testing = new CustomLayout();

private Label mapLabel = new Label("    <html>
<head>
  <title>My First Leaflet Map</title>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
     <!--[if lte IE 8]>
         <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
     <![endif]-->
      <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

</head>
<body>

<!-- define a the area the map will go into. Feel free to change the size as needed -->
<div id="map" style="width:800px; height: 500px;"></div>
<script>
var coords = [37.69, -59.23]; // the geographic center of our map
var zoomLevel = 3; // the map scale. See: http://wiki.openstreetmap.org/wiki/Zoom_levels
var map = L.map('map').setView(coords, zoomLevel);
// we need to provide the map with some base map tiles. There are few free options.
// we'll use Stamen Acetate, a muted base map good for overlaying data.
var tiles = 'http://acetate.geoiq.com/tiles/acetate-hillshading/';
// if you'd like to explore other base maps, see: http://developer.mapquest.com/web/products/open/map
// if you use different tiles, be sure to update the attribution :)
L.tileLayer(tiles+'{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://FortiusOne.com">FortiusOne</a> and <a href="http://stamen.com">Stamen</a>',
maxZoom: 18
}).addTo(map);
</script>

</body>
</html>", ContentMode.HTML);    

public MerchantSearchView(View endview) {
buttonlayout.addComponents(search, cancel);
rootlayout.addComponents(address, buttonlayout, testing);

setCompositionRoot(rootlayout);
}

就像我说的那样，它确实将800 x 500帧相加，并且确实将标题更改为“我的第一张传单地图”，但该帧为空。

Answer 1

对您来说，一种可行的方法是使用适合的地图加载项，而不是从头开始构建。

如果您使用的是Vaadin 8，则可以考虑使用本Leaflet插件

https://vaadin.com/directory/component/v-leaflet

如果您拥有Vaadin 10或更高版本，也可以使用它（尚不具有Vaadin 8版本的所有功能）

https://vaadin.com/directory/component/leafletjs-for-flow

Answer 2

晚了聚会，但也许有人会发现它仍然有用：）

Vaadin已经实现了一个示例项目，用于将Leaflet JS库与Vaadin 14+集成在一起。可以在Github官方页面上找到Vaadin Leaflet example

Vaadin添加HTML传单地图

2 个答案: