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 © <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);
그러나, 나는이 일에지도를 볼 수 없습니다 전자 페이지. 내가 뭐 놓친 거 없니? 어떤 도움이 필요합니까?
MapWidget에서 VerticalLayout을 확장하고 JS를 사용하여 DIV를 만드는 대신 ID를 'mapid'로 설정하도록 제안합니다. 그런 다음 MapWidget 클래스의 attach 메소드를 재정 의하여 여기에 JS를 실행합니다. –
layout.setId ("mapid");를 추가했습니다. DIV가 삭제되었지만 작동하지 않았습니다. – Eni
아마도 약간의 문제가있을 수 있지만, 가능하다면 [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