Ho provato a visualizzare un indicatore sulla mappa quando faccio clic su un pulsante della mia applicazione JavaFX. Quindi quello che succede è quando faccio clic su quel pulsante, scrivo la posizione in un file JSON, questo file verrà caricato nel file html che contiene la mappa. Il problema è che funziona perfettamente quando apro la pagina html nel browser, ma non succede nulla nella vista web di JavaFX e non so perché!
Questo è il file 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>Quando faccio clic sul pulsante, riempio il file JSON (che funziona perfettamente) e quindi eseguo questo per aggiornare la visualizzazione Web:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Come ho detto prima, quando apro il file sul browser vedo il risultato atteso, ma non so quale sia il problema con JavaFX. Se c'è un modo migliore per farlo, per favore dimmelo.
MODIFICARE:
Ho trovato una soluzione al problema inviando direttamente i dati (le coordinate GPS) da JavaFX a Javascript usando il metodo executeScript (), quindi non ho bisogno di un file json come bridge tra le due piattaforme. Quindi questo è un esempio di come appare il codice:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceEd ecco il 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);
}Grazie per i vostri commenti e risposte, e uno speciale sparatoria a reddit.
cache: falsealla chiamata ajax nel caso sia memorizzata nella cache e assicurati di scegliere come target il file giusto. Anche alcuni registri qua e là potrebbero aiutare a identificare il problema.