2016-10-06 3 views
0

내가 만약 angel에서 안돼서 및 angel이라는 위젯을 작성하는 것은 페이지에 대화 형지도,이 내가 가진 간단한 자바 스크립트 (가 별도로 작동) 표시하려면 메인 클래스에서Vaadin 위젯이 자바 스크립트를 실행하지 않습니까?

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); 

그러나, 나는이 일에지도를 볼 수 없습니다 전자 페이지. 내가 뭐 놓친 거 없니? 어떤 도움이 필요합니까?

+0

MapWidget에서 VerticalLayout을 확장하고 JS를 사용하여 DIV를 만드는 대신 ID를 'mapid'로 설정하도록 제안합니다. 그런 다음 MapWidget 클래스의 attach 메소드를 재정 의하여 여기에 JS를 실행합니다. –

+0

layout.setId ("mapid");를 추가했습니다. DIV가 삭제되었지만 작동하지 않았습니다. – Eni

+0

아마도 약간의 문제가있을 수 있지만, 가능하다면 [v-leaflet] (https://vaadin.com/directory#!addon/v-leaflet)과 같은 기존 애드온을 사용 해본 적이 있습니까? , [open-layers-wrapper] (https://vaadin.com/directory#!addon/openlayers-3-wrapper-for-vaadin) 또는 [google maps] (https://vaadin.com/directory#!addon)/googlemaps-add-on)? – Morfic

답변

0

MapWidget 생성자에서 함수를 호출하는 대신 커넥터를 사용하여 수행하십시오. 그런 다음 Java 코드에 속성을 초기화 할 수 있습니다

window.com_your_package_MapWidget = function() { 

    var showMapToMe = function(div) { 
     // ... your existing code 
    } 

    var me = this; 
    showMapToMe(me.getElement()) 
} 

또한 국가 클래스를 추가 할 수 있습니다 아래와 같은 labMap.js을 수정 (또는 새로운 자바 스크립트 파일을 추가) 및 MapWidget 생성자에서 코드를 제거 커넥터 스크립트에서 사용하십시오. 자세한 내용은 docs을 참조하십시오.

관련 문제