Ваадин добавить HTML листовка карта - PullRequest
Новая
       5

Ваадин добавить HTML листовка карта

0 голосов
/ 07 февраля 2019

Я хочу добавить карту листовки на мою страницу 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 на 500 и меняет заголовок на «моя первая карта листовки», но кадр пуст.

1 Ответ

0 голосов
/ 07 февраля 2019

Один из возможных подходов для вас - использовать подходящее дополнение для карты вместо создания его с нуля.

Если вы используете Vaadin 8, вы можете рассмотреть это дополнение Leaflet

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

Если у вас есть Vaadin 10 или новее, есть и этот (он еще не обладает всеми функциями, аналогичными версии Vaadin 8)

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

...