Tôi đã cố gắng hiển thị một điểm đánh dấu trên bản đồ khi tôi nhấp vào Nút của ứng dụng JavaFX của mình. Vì vậy, những gì xảy ra là khi tôi nhấp vào nút đó, tôi viết vị trí trong tệp JSON, tệp này sẽ được tải trong tệp html chứa bản đồ. Vấn đề là nó hoạt động hoàn hảo khi tôi mở trang html trong trình duyệt, nhưng không có gì xảy ra trong chế độ xem web của JavaFX và tôi không biết tại sao!
Đây là tệp 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>Khi tôi nhấp vào nút, tôi điền vào tệp JSON (hoạt động hoàn hảo) và sau đó tôi thực hiện điều này để làm mới webview:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());Như tôi đã nói trước đây, khi tôi mở tệp trên trình duyệt, tôi thấy kết quả mong đợi, nhưng tôi không biết vấn đề với JavaFX là gì. Nếu có một cách tốt hơn để làm điều này xin vui lòng cho tôi biết.
BIÊN TẬP:
Tôi đã tìm ra giải pháp cho vấn đề bằng cách gửi trực tiếp dữ liệu (tọa độ GPS) từ JavaFX sang Javascript bằng phương thức execScript (), vì vậy tôi không cần tệp json làm cầu nối giữa hai nền tảng. Vì vậy, đây là một ví dụ về cách mã trông như thế nào:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instanceVà đây là 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);
}Cảm ơn bạn đã bình luận và câu trả lời của bạn, và một loạt đá luân lưu đặc biệt để reddit.
cache: falseđến cuộc gọi ajax trong trường hợp nó được lưu trong bộ nhớ cache và đảm bảo bạn nhắm mục tiêu đúng tệp. Ngoài ra một số nhật ký ở đây và sẽ giúp xác định vấn đề.