J'ai essayé d'afficher un marqueur sur la carte lorsque je clique sur un bouton de mon application JavaFX. Donc, ce qui se passe, c'est quand je clique sur ce bouton, j'écris la position dans un fichier JSON, ce fichier sera chargé dans le fichier html qui contient la carte. Le problème est qu'il fonctionne parfaitement lorsque j'ouvre la page html dans le navigateur, mais rien ne se passe dans la vue Web de JavaFX, et je ne sais pas pourquoi!
Voici le fichier 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>Lorsque je clique sur le bouton, je remplis le fichier JSON (qui fonctionne parfaitement) puis je l'exécute pour rafraîchir la vue Web:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Comme je l'ai déjà dit, lorsque j'ouvre le fichier sur le navigateur, je vois le résultat attendu, mais je ne sais pas quel est le problème avec JavaFX. S'il existe une meilleure façon de procéder, dites-le-moi.
ÉDITER:
J'ai trouvé une solution au problème en envoyant directement les données (les coordonnées GPS) de JavaFX à Javascript en utilisant la méthode executeScript (), donc je n'ai pas besoin d'un fichier json comme pont entre les deux plates-formes. Voici donc un exemple de l'apparence du code:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceEt voici le 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);
}Merci pour vos commentaires et réponses, et une fusillade spéciale pour reddit.
cache: falseà l'appel ajax dans le cas où il est mis en cache et assurez-vous de cibler le bon fichier. De plus, certains journaux ici et là aideraient à identifier le problème.