Question

我是Vaadin的新手，写了一个Vaadin Widget，在页面中显示一个交互式Map，这是一个简单的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);

但是，我无法在页面中看到地图。我错过了什么？有什么帮助吗？

Answer 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())
}

您还可以添加State类，以便在Java代码中初始化属性，然后在连接器脚本中使用它们。有关详细信息，请参阅docs

Vaadin Widget不运行javascript？

1 个答案: