JavaFX アプリケーションのボタンをクリックしたときに、マップ上にマーカーを表示しようとしています。そのボタンをクリックすると、JSON ファイルに位置が書き込まれ、このファイルがマップを含む HTML ファイルに読み込まれます。問題は、ブラウザーで HTML ページを開くと完全に機能するのですが、JavaFX の Web ビューでは何も起こらないことです。その理由はわかりません。
これは 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 ファイルが入力され(これは完全に機能します)、これを実行して Web ビューを更新します。
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
前にも言ったように、ブラウザでファイルを開くと期待どおりの結果が表示されますが、JavaFX の何が問題なのかわかりません。もっと良い方法があれば教えてください。
編集:
私は、executeScript() メソッドを使用して JavaFX から Javascript にデータ (GPS 座標) を直接送信することで問題の解決策を見つけました。そのため、2 つのプラットフォーム間のブリッジとして 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);
}
コメントと回答、そして Reddit への特別なシュートアウトに感謝します。
ベストアンサー1
推測するに、次の 2 つのうちのいずれかが起こっていると考えられます。
A) JavaFX がクロスサイト Ajax 呼び出しをサポートしていないか、B) 非同期 Ajax 応答を待機していないか、何か他の問題が発生しています。
それでは、一緒にテストしてみましょう。まず、これをクリーンアップして、Ajax 呼び出しをネストできますか? 次に、console.log ステートメントをいくつか追加して、それぞれが何を返しているかを確認できますか? 出力が欠落している場合は、どこで問題が発生しているかがわかるので、問題解決に役立ちます。
注記: success は少し古くなっているため、success を 'done' 追加に変更しました。また、次の呼び出しに空白が送信されるかどうかに関する質問 (同期の問題) を排除するためにすべてがネストされています。
$.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);
});
これが問題になる場合は、Java で console.log 出力を System.out に取り込む方法に関するリンクを次に示します。JavaFX 8 WebEngine: Java で JavaScript から System.out に console.log() を取得する方法は?
...また、redditからもこんにちは。