当我单击 JavaFX 应用程序的按钮时，我一直试图在 map 上显示一个标记。所以当我点击那个按钮时会发生什么，我在一个 JSON 文件中写入位置，这个文件将被加载到包含 map 的 html 文件中。问题是当我在浏览器中打开 html 页面时它运行良好，但在 JavaFX 的 web View 中没有任何 react ，我不知道为什么!
这是 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>
当我单击该按钮时，我会填充 JSON 文件(效果很好)，然后执行此操作以刷新 web View :
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
正如我之前所说，当我在浏览器上打开文件时，我看到了预期的结果，但我不知道 JavaFX 有什么问题。
如果有更好的方法来做到这一点，请告诉我。
编辑:
我通过使用 executeScript() 方法将数据(GPS 坐标)从 JavaFX 直接发送到 Javascript 找到了解决问题的方法，因此我不需要 json 文件作为两个平台之间的桥梁。
因此，这是代码外观的示例:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instance
这是 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);
}
感谢您的评论和回答，以及对 reddit 的特别枪战。
最佳答案
如果我不得不猜测 - 正在发生两件事之一:
A)您的 javaFX 不支持跨站点 ajax 调用或 B)它没有等待异步 ajax 响应/其他事情出错了。
所以让我们一起做一些测试。首先，我们可以清理它以嵌套 ajax 调用吗？然后你可以添加一些 console.log 语句来找出每个返回的内容吗？如果您错过了某些输出，我们就会知道哪里出了问题，这将帮助我们解决问题。
请注意，我已将成功更改为“完成”添加，因为成功有点过时，并且所有内容都是嵌套的，以消除有关是否将任何空白发送到下一个调用的问题(同步问题):
$.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);
});
如果这是一个问题，这里有一个将 console.log 输出导入到 Java 中的 System.out 的链接:
JavaFX 8 WebEngine: How to get console.log() from javascript to System.out in java?
......还有来自reddit的你好。
关于javascript - 谷歌 map 和 JavaFX : Display marker on the map after clicking JavaFX button，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44130442/