Vaadin 添加 HTML 傳單地圖

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 示例中找到

Vaadin 添加 HTML 傳單地圖

問題描述

2 個解決方案

解決方案1
2 2019-02-07 07:29:12

解決方案2
1 2020-06-29 06:40:03

Vaadin 添加 HTML 傳單地圖

問題描述

2 個解決方案

解決方案1 2 2019-02-07 07:29:12

解決方案2 1 2020-06-29 06:40:03

解決方案1
2 2019-02-07 07:29:12

解決方案2
1 2020-06-29 06:40:03