Google Maps & JavaFX : JavaFX 버튼 클릭 후 지도에 마커를 표시
JavaFX 어플리케이션의 버튼을 클릭하면 지도에 마커를 표시하려고 합니다.이 버튼을 클릭하면 JSON 파일에 위치가 입력됩니다.이 파일은 맵이 포함된html 파일에 로드됩니다.문제는 브라우저에서 html 페이지를 열면 완벽하게 작동하는데 JavaFX의 웹 뷰에서는 아무 일도 일어나지 않고 왜 그런지 모르겠다는 것입니다!
html 파일은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
/*#map {
height: 100%;
}*/
#map{width:100%;height:100%;margin:auto;}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var marker;
// Multiple Markers
var markers = [];
var pos = {lat: 46.662388, lng: 0.3599617};
var itinerary_markers = [];
function initMap() {
var currentLat, currentLng;//Latitude et longtitude courante
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=My+ADDRESS&key=MY_KEY',
async: false,
dataType: 'json',
success: function (data) {
currentLat = data.results[0].geometry.location.lat;
currentLng = data.results[0].geometry.location.lng;
}
});
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: currentLat, lng: currentLng},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*MARQUEUR*/
$.ajax({
async: false,
url: 'test.json',
data: "",
accepts:'application/json',
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.hydrants.length; i++) {
markers.push( data.hydrants[i]);
}
}
});
var posi = new google.maps.LatLng(markers[0].Lat, markers[0].Lng);
marker = new google.maps.Marker({
position: posi,
map: map,
//title: markers[i][0]
title: markers[0].Name
});
}
</script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&language=fr"
async defer></script>
</body>
</html>
버튼을 클릭하면 JSON 파일(완벽하게 동작)이 채워지고 다음 작업을 수행하여 웹 뷰를 새로 고칩니다.
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
아까도 말씀드렸듯이 브라우저에서 파일을 열면 예상된 결과가 나오는데 JavaFX에 무슨 문제가 있는지 모르겠습니다.더 좋은 방법이 있으면 알려주세요.
편집:
executeScript() 메서드를 사용하여 JavaFX에서 Javascript로 데이터(GPS 좌표)를 직접 전송하여 문제를 해결했으므로 두 플랫폼 간의 브리지로서 json 파일이 필요하지 않습니다.다음은 코드의 예를 제시하겠습니다.
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instance
Javascript는 다음과 같습니다.
/*The initial latitude and longtitude*/
var currentLat = the latitude;
var currentLng = the longtitude;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: currentLat, lng: currentLng},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var posi = new google.maps.LatLng(currentLat, currentLng);
marker = new google.maps.Marker({
position: posi,
map: map,
visible: false
});
}
/*The method that is I call from JavaFX*/
function updateMarker(_lat, _lng){
marker.setPosition({lat: _lat, lng: _lng});
map.setCenter(new google.maps.LatLng(_lat, _lng));
marker.setVisible(true);
}
당신의 의견과 답변, 그리고 리다이트를 위한 특별한 승부차기에 감사드립니다.
두 가지 중 하나가 발생하고 있다고 추측할 수 있습니다.
A) javaFX가 사이트 간 Ajax 콜을 지원하지 않거나 B) 비동기 Ajax 응답 또는 기타 오류가 발생할 때까지 대기하지 않습니다.
그럼 몇 가지 테스트를 함께 해보죠.먼저 이걸 정리해서 에이잭스 콜을 모을 수 있을까요?그런 다음 console.log 문을 추가하여 각각이 무엇을 반환하는지 확인할 수 있습니까?일부 출력을 놓치면 어디가 잘못되었는지 알 수 있으므로 문제를 해결하는 데 도움이 됩니다.
성공이 다소 오래되어 다음 콜에 공백이 전송되지 않는지(동기성 문제)에 대한 의문을 없애기 위해 모든 것이 중첩되었기 때문에 성공을 '완료' 추가로 변경했습니다.
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=My+ADDRESS&key=MY_KEY',
async: false,
dataType: 'json'
}).done(function(data) {
currentLat = data.results[0].geometry.location.lat;
currentLng = data.results[0].geometry.location.lng;
console.log(currentLat);
console.log(currentLng);
// Multiple Markers
var markers = [];
var pos = {lat: 46.662388, lng: 0.3599617};
var itinerary_markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: currentLat, lng: currentLng},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
console.log(map);
/*MARQUEUR*/
$.ajax({
async: false,
url: 'test.json',
data: "",
accepts:'application/json',
dataType: 'json'
}).done(function(data) {
for (var i = 0; i < data.hydrants.length; i++) {
markers.push( data.hydrants[i]);
}
console.log(markers);
var posi = new google.maps.LatLng(markers[0].Lat, markers[0].Lng);
console.log(posi);
var marker = new google.maps.Marker({
position: posi,
map: map,
//title: markers[i][0]
title: markers[0].Name
});
console.log(marker);
}).fail(function(jqXHR, testStatus){
console.log(textStatus);
});
}).fail(function(jqXHR, testStatus){
console.log(textStatus);
});
다음은 console.log 출력을 시스템에 가져오는 링크입니다.Java FX 8 Web Engine: javascript에서 system으로 console.log()를 가져오는 방법.자바로 표시됩니까?
...레딧에서 인사드립니다.
줄:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
파일 경로가 올바른지 다시 한 번 확인해 보겠습니다.StackOverflow에 대한 다른 응답을 읽어보면, 이는 패키지 루트에 상대적인 것으로 보이며 선행하는 '/'가 있거나 없는 것으로 보입니다.getResource("data/index.html")하지만, 다시 말씀드리지만, 이미 다음과 같은 오류가 발생하고 있을 수 있습니다.getResource()...
다음으로 디버깅을 위해 JSON을 작성하고 적절한 JSON을 수동으로 작성하여 webView에 표시되도록 하는 작업을 수행합니다.움직이는 부품이 적을수록 좋습니다.미리 작성된 JSON에서 사용할 수 있는 경우 Java에서 쓰고 HTML로 로드되는 JSON에 문제가 있다고 가정할 수 있습니다.
편집: 조금 더 깊이 파고들었습니다.다시 한번 완전히 틀릴 수 있지만 수동으로 콜을 시도해 볼 수도 있습니다.initMap()웹 브라우저가 보통 로드 시 호출하는 Java의 함수입니다.JavaFX WebView on Button click에서 JavaScript 함수를 호출해야 합니까?자세한 내용은 를 참조하십시오.해라this.webView.getEngine().executeScript("initMap()");버튼을 사용하여 JSON을 편집한 후.
편집 2 여백으로 분할하는 것도 의미가 있을 수 있습니다.initMap으로initMap그리고.updateMap지도에서 마커를 설정하기 위한 기능입니다.이건 거의 아무것도 깨지지는 않지만요.
마우스 휠을 사용하여 지도를 축소하거나 축소할 때 마커가 나타나면 저와 같은 문제가 발생한 것입니다.
지도 보기를 수동으로 확대/축소하여 마커를 복원합니다.또한 방향 서비스로부터의 루트를 표시할 때도 이 기술을 사용해야 했습니다.그렇지 않으면 웨이포인트 마커가 올바르게 표시되지 않습니다.
이를 위한 Javafx 컨트롤러 클래스의 코드는 다음과 같습니다.
KeyFrame kf1 = new KeyFrame(Duration.seconds(0.75), e -> map.setZoom(map.getZoom() - 1));
KeyFrame kf2 = new KeyFrame(Duration.seconds(1.5), e -> map.setZoom(map.getZoom() + 1));
Timeline timeline = new Timeline(kf1, kf2);
Platform.runLater(timeline::play);
이는 JavaFX WebView에서 Javascript 엔진 호출을 둘러싼 얇은 Java 래퍼인 GMapsFX를 사용했습니다.도움이 됐으면 좋겠네요.
언급URL : https://stackoverflow.com/questions/44130442/google-maps-javafx-display-marker-on-the-map-after-clicking-javafx-button
'programing' 카테고리의 다른 글
| 어레이 상에서 반복하지 않고 정의된 횟수만큼 ng-repeat하는 방법 (0) | 2023.01.31 |
|---|---|
| JavaScript에서 여러 값을 반환하시겠습니까? (0) | 2023.01.31 |
| Handlebars.js 각 루프 범위 밖의 변수에 액세스합니다. (0) | 2023.01.31 |
| Java 8: Java.util.function의 TriFunction(및 kin)은 어디에 있습니까?아니면 대체방법이 뭐죠? (0) | 2023.01.31 |
| div에 도구 설명 추가 (0) | 2023.01.31 |