JavaFX uygulamamın bir Düğmesine tıkladığımda haritada bir işaretleyici görüntülemeye çalışıyorum. Bu düğmeye tıkladığımda, JSON dosyasındaki konumu yazdığımda, bu dosya haritayı içeren html dosyasına yüklenecektir. Sorun, html sayfasını tarayıcıda açtığımda mükemmel çalışıyor, ancak JavaFX'in web görünümünde hiçbir şey olmuyor ve nedenini bilmiyorum!
Bu html dosyası:
<!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>
Düğmeyi tıklattığımda, (mükemmel çalışan) JSON dosyasını dolduruyorum ve sonra web görünümünü yenilemek için bunu yürütüyorum:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Daha önce de söylediğim gibi, dosyayı tarayıcıda açtığımda beklenen sonucu görüyorum, ancak JavaFX ile sorunun ne olduğunu bilmiyorum. Bunu yapmanın daha iyi bir yolu varsa lütfen söyle.
DÜZENLE:
Ben executeScript () yöntemini kullanarak JavaFX gelen Javascript doğrudan veri (GPS koordinatları) göndererek soruna bir çözüm buldum, bu yüzden iki platform arasında köprü olarak bir json dosyasına gerek yok. Bu, kodun nasıl göründüğüne bir örnektir:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceVe işte 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);
}
Yorumlarınız ve cevaplarınız ve reddit için özel bir atışınız için teşekkür ederiz.
cache: falseönbelleğe durumunda ajax çağrıya ve lütfen doğru dosyayı hedef olun. Ayrıca burada bazı günlükler ve sorunu belirlemek yardımcı olacaktır.