关于javascript：谷歌地图＆amp;

Google Maps & JavaFX: Display marker on the map after clicking JavaFX button

当我单击JavaFX应用程序的一个按钮时，我一直试图在地图上显示一个标记。所以当我点击那个按钮时，我将位置写在一个JSON文件中，这个文件将被加载到包含映射的HTML文件中。问题是，当我在浏览器中打开HTML页面时，它工作得很好，但是在JavaFX的Web视图中什么也没有发生，我不知道为什么！

这是HTML文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<!DOCTYPE html>
<html>
<head>
Simple Map
<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>

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
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&language=fr"
async defer>

</body>
</html>

当我单击按钮时，我将填充JSON文件(它工作得很好)，然后执行此操作以刷新WebView：

1	this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());

正如我之前所说，当我在浏览器上打开文件时，我看到了预期的结果，但是我不知道JavaFX有什么问题。如果有更好的方法，请告诉我。

编辑：

我通过使用executeScript()方法直接将数据(GPS坐标)从javafx发送到javascript，找到了解决问题的方法，因此我不需要JSON文件作为两个平台之间的桥梁。这是一个代码看起来的例子：

1	eng.executeScript("updateMarker(" + lat +"," + lng +")");//eng is a WebEngine instance

这里是javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/*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语句来了解每个语句发送的内容吗？如果你错过了一些输出，我们知道哪里出错了，这将帮助我们解决问题。

注意，我已经将success更改为done，因为success有点过时，并且所有内容都被嵌套，以消除有关是否有任何空格被发送到下一个调用(同步性问题)的问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$.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);
});

这里是一个获取控制台的链接。如果这是一个问题，在Java中将日志输出输出到System.out：JavaFX 8 WebEng:如何从JavaScript到Java中的System.out？

…还有来自Reddit的你好。