Блог

Главная - Вопросы по программированию - Виджет Vaadin не запускает JavaScript?

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

#javascript #widget #vaadin

#javascript #виджет #vaadin

Вопрос:

Я новичок в 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 amp;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()");
    }
}

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

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

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

Комментарии:

1. Я бы посоветовал сделать ваш MapWidget для расширения VerticalLayout и установить для его идентификатора значение ‘mapid’ вместо использования JS для создания DIV. Затем я бы переопределил метод attach в ваших классах MapWidget и вместо этого выполнил JS здесь.

2. Я добавил макет. setId(«mapid»); и удалил DIV, но это не сработало.

3. Возможно, это немного оффтопично, но, если это вообще возможно в вашем случае, рассматривали ли вы возможность использования уже существующего дополнения, такого как v-leaflet , open-layers-wrapper или Google maps ?

4. Да, я рассматривал эти варианты. Что делать, если я хочу настроить карту для определенной цели.

5. Был шанс, что вы о них не знали. Я просто предположил, что если бы это было так, вы могли бы легко избежать изобретения колеса и сделать это быстро, используя его. В противном случае вам пришлось бы столкнуться с проблемой отладки вашей проблемы… Кстати, вы получаете какие-либо ошибки в консоли инструментов разработчика по вашему выбору?

Ответ №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, а затем использовать их в скрипте соединителя.
Для получения дополнительной информации см. Документы