He estado tratando de mostrar un marcador en el mapa cuando hago clic en un botón de mi aplicación JavaFX. Entonces, lo que sucede es que cuando hago clic en ese botón, escribo la posición en un archivo JSON, este archivo se cargará en el archivo html que contiene el mapa. El problema es que funciona perfectamente cuando abro la página html en el navegador, pero no sucede nada en la vista web de JavaFX, ¡y no sé por qué!
Este es el archivo 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>Cuando hago clic en el botón, lleno el archivo JSON (que funciona perfectamente) y luego lo ejecuto para actualizar la vista web:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Como dije antes, cuando abro el archivo en el navegador veo el resultado esperado, pero no sé cuál es el problema con el JavaFX. Si hay una mejor manera de hacerlo, dígamelo.
EDITAR:
Encontré una solución al problema enviando directamente los datos (las coordenadas GPS) de JavaFX a Javascript usando el método executeScript (), por lo que no necesito un archivo json como puente entre las dos plataformas. Así que este es un ejemplo de cómo se ve el código:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceY aquí está el 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);
}Gracias por sus comentarios y respuestas, y un tiroteo especial para reddit.
cache: falsea la llamada ajax en caso de que esté en caché y asegúrese de apuntar al archivo correcto. También algunos registros aquí y allá ayudarían a identificar el problema.