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그리고 여기 자바 스크립트가 있습니다 :
/*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);
}귀하의 의견과 답변, 특별한 레딧 아웃에 감사드립니다.
48
참고로 : reddit.com/r/ProgrammerHumor/comments/6e6wu6/...
—
Mateen Ulhaq
스크립트가 최선의 방법으로 작성되지는 않았지만 아무런 문제가 없습니다. 작동하지 않을 수있는 몇 가지 가능성이 있습니다. 새 마커가 json 파일의 맨 위에 추가되었는지 확인하십시오. 패스
—
Gökhan Kurt
cache: false가 캐시되는 경우에 아약스 호출에, 그리고 당신이 올바른 파일을 대상으로합니다. 또한 여기에 일부 로그가 있으며 문제를 식별하는 데 도움이 될 것입니다.
JavaFX에 ajax를 사용하여 test.json과 같은 HTTP가 아닌 엔드 포인트에서 호출 / 데이터를 수신하는 데 문제가 있습니까?
—
Sebastian
@Sebastian 나를 미치게 만드는 것은 앱을 열 때 json 파일이 올바르게로드되고 예상 결과가 표시된다는 것입니다. 문제는 json 파일을 다른 값으로 업데이트 할 때 (앱이 열려있는 동안) 새 마커를 표시하기 위해 새로 고침하고 싶지 않습니다! 따라서 아약스 호출에는 문제가 없습니다. 그러나 콜백 일 수 있습니까? 페이지를로드하는 동안 initMap ()이 호출되기 때문에
—
Chandler Bing
@ GökhanKurt 위의 답변을 읽으시겠습니까
—
Chandler Bing