Vaadin 添加 HTML 传单地图答案

【问题标题】：Vaadin add HTML leaflet mapVaadin 添加 HTML 传单地图
【发布时间】：2019-07-01 00:28:20
【问题描述】：

我想将传单地图添加到我的 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 帧，并且确实将标题更改为“我的第一张传单地图”，但该帧是空的。

【问题讨论】：

应该可以，请出示您的代码
@AndréSchild 我添加了代码
这行不通，因为您没有在现有页面中嵌入带有 ...head...body.. 标记的整个 html 页面，这将中断。跨度>
@AndréSchild 那么有什么办法吗？
如果您打开不需要的标签会怎样？

标签： java html leaflet vaadin

【解决方案1】：

一种可能的方法是使用合适的地图插件，而不是从头开始构建它。

如果你使用 Vaadin 8，你可以考虑这个 Leaflet 插件

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

如果您有 Vaadin 10 或更新版本，还有这个（它还没有 Vaadin 8 版本的所有功能）

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

【讨论】：

我不想使用插件，因为我们正在尝试构建自己的地图并添加那个。有没有其他办法？
@Hola 是的，基本上你可以调查例如 v-leaflet 插件是如何实现的，并以类似的方式做自定义组件。该主题太宽泛，无法在单个 StackOverflow 问题中回答。作为初学者，您应该阅读以下内容：vaadin.com/docs/v8/framework/articles/…

【解决方案2】：

聚会迟到了，但也许有人会发现它仍然有用:)

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

【讨论】：