Saya telah mencoba untuk menampilkan penanda di peta ketika saya mengklik Tombol aplikasi JavaFX saya. Jadi yang terjadi adalah ketika saya mengklik tombol itu, saya menulis posisi dalam file JSON, file ini akan dimuat dalam file html yang berisi peta. Masalahnya adalah ia berfungsi dengan baik ketika saya membuka halaman html di browser, tetapi tidak ada yang terjadi di tampilan web JavaFX, dan saya tidak tahu mengapa!
Ini adalah 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>Ketika saya mengklik tombol, saya mengisi file JSON (yang bekerja dengan sempurna) dan kemudian saya menjalankan ini untuk menyegarkan tampilan web:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Seperti yang saya katakan sebelumnya, ketika saya membuka file di browser saya melihat hasil yang diharapkan, tetapi saya tidak tahu apa masalahnya dengan JavaFX. Jika ada cara yang lebih baik untuk melakukan ini tolong beri tahu saya.
EDIT:
Saya menemukan solusi untuk masalah ini dengan mengirim langsung data (koordinat GPS) dari JavaFX ke Javascript menggunakan metode executeScript (), jadi saya tidak perlu file json sebagai jembatan antara kedua platform. Jadi ini adalah contoh bagaimana kode tersebut terlihat:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceDan di sini adalah 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);
}Terima kasih atas komentar dan jawaban Anda, dan adu penalti untuk reddit.
cache: falsepanggilan ajax jika itu di-cache, dan pastikan Anda menargetkan file yang tepat. Juga beberapa log di sana-sini akan membantu mengidentifikasi masalah.