javascript - studio - iconos de google maps
Google Maps y JavaFX: muestra el marcador en el mapa después de hacer clic en el botón JavaFX (3)
En la linea:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
Intentaría verificar que la ruta al archivo sea correcta.
Al leer otras respuestas en StackOverflow, parece que se supone que esto es relativo a la raíz del paquete y con o sin el ''/'' inicial.
es decir,
getResource("data/index.html")
.
Pero, de nuevo, tal vez ya
getResource()
viendo errores relacionados con
getResource()
...
Mi próximo paso, para fines de depuración, sería comentar la parte en la que escribe el JSON y simplemente escribir manualmente un buen JSON e intentar que aparezca en la vista web. Cuantas menos partes móviles, mejor. Si puede hacer que funcione con su JSON preescrito, entonces puede suponer que es un problema con el JSON que está escribiendo con Java y luego se carga en el HTML.
Editar:
cavé un poco más profundo.
Esto podría volver a ser totalmente incorrecto, pero quizás pueda intentar llamar manualmente a la función
initMap()
desde Java que su navegador web normalmente llama onload.
¿Cómo llamar a una función de JavaScript desde un JavaFX WebView al hacer clic en el botón?
Tiene algunos detalles más.
Pruebe
this.webView.getEngine().executeScript("initMap()");
después de editar el JSON con su botón.
Editar 2
Además, también podría tener sentido dividir
initMap
en una función
initMap
y
updateMap
para comenzar con el mapa y luego establecer los marcadores en el mapa.
Aunque esto apenas está rompiendo nada.
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 instance
Y 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.
Si tuviera que adivinar, una de dos cosas está sucediendo:
A) su javaFX no admite llamadas ajax entre sitios o B) no está esperando la respuesta asíncrona ajax / algo más está saliendo mal.
Así que hagamos algunas pruebas juntos. En primer lugar, ¿podemos limpiar esto para anidar las llamadas ajax? Entonces, ¿puede agregar algunas declaraciones de console.log para averiguar qué está enviando cada una? Si pierde algún resultado, sabemos dónde va mal y eso nos ayudará a arreglar las cosas.
Tenga en cuenta que he cambiado el éxito a las adiciones ''hechas'' porque el éxito está un poco desactualizado y todo está anidado para eliminar la pregunta sobre si se están enviando espacios en blanco a las próximas llamadas (problemas de sincronía):
$.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);
});
Aquí hay un enlace para obtener la salida de console.log en System.out en Java si esto es un problema: JavaFX 8 WebEngine: ¿Cómo obtener console.log () de javascript a System.out en java?
... También hola de reddit.
Si usa la rueda del mouse para acercar o alejar el mapa y aparece el marcador, entonces está experimentando el mismo problema que yo.
Intente acercar manualmente la vista del mapa para restaurar los marcadores. También tuve que emplear esta técnica al mostrar una ruta desde el Servicio de indicaciones, de lo contrario los marcadores de puntos de ruta no se mostraban correctamente.
Este es el código en mi clase de controlador Javafx para hacerlo:
KeyFrame kf1 = new KeyFrame(Duration.seconds(0.75), e -> map.setZoom(map.getZoom() - 1));
KeyFrame kf2 = new KeyFrame(Duration.seconds(1.5), e -> map.setZoom(map.getZoom() + 1));
Timeline timeline = new Timeline(kf1, kf2);
Platform.runLater(timeline::play);
Esto estaba usando GMapsFX, que es solo una delgada envoltura de Java alrededor de las llamadas del motor de JavaScript en un JavaFX WebView. Espero que ayude.