Виджет Vaadin не запускает javascript?

Я новичок в Vaadin, и писать виджет Vaadin, чтобы показать интерактивную карту на странице, это простой javascript у меня есть (он работает отдельно):

var showMapToMe = function() {
var div = document.createElement('div');
div.id = 'mapid';
div.style.width = "800px";
div.style.height = "800px";
document.body.appendChild(div);
var mymap = L.map('mapid').setView([ 44.646129, -68.599838 ], 3);   
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=XXXXX',
                {
                    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 © <a href="http://mapbox.com">Mapbox</a>',
                    maxZoom : 18,
                }).addTo(mymap);
 L.marker([44.646129, -63.599838]).addTo(mymap);}

В основном классе я просто пишу следующий код в конструкторе:

    @JavaScript({ ".../leaflet.js",".../leaflet.markercluster.js","labMap.js"})
public class MapWidget extends com.vaadin.ui.AbstractJavaScriptComponent {
     public MapWidget() {
        Page.getCurrent().getJavaScript().execute("showMapToMe()");
    }
}

Наконец, в функции init у меня есть:

            final MapWidget component = new MapWidget();        
            final VerticalLayout layout = new VerticalLayout();
            layout.setStyleName("demoContentLayout");
            layout.setSizeFull();
            layout.addComponent(component);
            setContent(layout);

Однако я не могу увидеть карту на странице. Я что-то пропустил? Есть помощь?

1 ответ

  1. Вместо вызова функции в конструкторе MapWidget используйте для этого соединитель.

    Измените labMap.js как показано ниже (или добавьте новый файл javascript) и удалите код из конструктора MapWidget

    window.com_your_package_MapWidget = function() {
    
       var showMapToMe = function(div) {   
          // ... your existing code  
       }
    
       var me = this;
       showMapToMe(me.getElement())
    }
    

    Можно также добавить класс состояния, чтобы можно было инициализировать атрибут в коде Java, а затем использовать их в скрипте соединителя.
    Дополнительные сведения см. В документе docs