Ich habe versucht, eine Markierung auf der Karte anzuzeigen, wenn ich auf eine Schaltfläche meiner JavaFX-Anwendung klicke. Wenn ich also auf diese Schaltfläche klicke, schreibe ich die Position in eine JSON-Datei. Diese Datei wird in die HTML-Datei geladen, die die Karte enthält. Das Problem ist, dass es perfekt funktioniert, wenn ich die HTML-Seite im Browser öffne, aber in der Webansicht von JavaFX nichts passiert und ich nicht weiß warum!
Dies ist die HTML-Datei:
<!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>Wenn ich auf die Schaltfläche klicke, fülle ich die JSON-Datei (die perfekt funktioniert) und führe diese aus, um die Webansicht zu aktualisieren:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Wie ich bereits sagte, sehe ich beim Öffnen der Datei im Browser das erwartete Ergebnis, weiß aber nicht, wo das Problem mit JavaFX liegt. Wenn es einen besseren Weg gibt, sag es mir bitte.
BEARBEITEN:
Ich habe eine Lösung für das Problem gefunden, indem ich die Daten (die GPS-Koordinaten) mit der Methode executeScript () direkt von JavaFX an Javascript gesendet habe. Daher benötige ich keine JSON-Datei als Brücke zwischen den beiden Plattformen. Dies ist also ein Beispiel dafür, wie der Code aussieht:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceUnd hier ist das 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);
}Vielen Dank für Ihre Kommentare und Antworten sowie für ein spezielles Shootout zum Reddit.
cache: falseden Ajax-Aufruf, falls er zwischengespeichert ist, und stellen Sie sicher, dass Sie auf die richtige Datei abzielen. Auch einige Protokolle hier und da würden helfen, das Problem zu identifizieren.