Google地图和JavaFX：点击JavaFX按钮后在地图上显示标记
当我点击我的JavaFX应用程序的按钮时，我一直试图在地图上显示一个标记。 所以会发生什么是当我点击那个按钮时，我在JSON文件中写入位置，这个文件将被加载到包含地图的html文件中。 问题是，当我在浏览器中打开html页面时，它完美地工作，但在JavaFX的web视图中没有任何反应，我不知道为什么！
这是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文件（完美的工作），然后执行此操作刷新webview：
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
正如我之前所说的，当我在浏览器上打开文件时，我看到了预期的结果，但我不知道JavaFX有什么问题。 如果有更好的方法来做到这一点，请告诉我。
编辑：
我通过使用executeScript（）方法直接将JavaFX中的数据（GPS坐标）发送到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：如何从java中将console.log（）转换为java中的System.out？
...也来自reddit的你好。
在该行中：
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
我会尝试仔细检查文件的路径是否正确。 阅读StackOverflow的其他答案，它看起来应该是相对于软件包根目录以及带或不带前导'/'。 即getResource("data/index.html") 。 但是，再次，也许你已经看到有关getResource()错误...
为了进行调试，我的下一步将是注释掉你编写JSON的部分，并手动编写一些好的JSON，并试着让它显示在webView中。 运动部件越少越好。 如果您可以使用预先编写好的JSON来处理它，那么您可以认为这是与您使用Java编写的JSON有关的问题，然后将其加载到HTML中。
编辑：我挖得更深一点。 这可能是完全错误的，但也许你可以尝试手动调用Java的initMap()函数，你的web浏览器通常会调用onload。 如何从按钮上的JavaFX WebView调用JavaScript函数单击？ 有更多的细节。 尝试this.webView.getEngine().executeScript("initMap()"); 在您使用按钮编辑JSON之后。
编辑2另外，也可以将initMap分割为一个initMap和updateMap函数，以使地图开始并在地图上设置标记。 虽然这几乎不会破坏任何东西。
如果您的鼠标滚轮用于放大或缩小地图并显示标记，则您遇到了与我所做的相同的问题。
尝试手动缩放地图视图以恢复标记。 从方向服务显示路线时，我也必须使用这种技术，否则航路点标记显示不正确。
这是我的Javafx控制器类中的代码：
KeyFrame kf1 = new KeyFrame(Duration.seconds(0.75), e -> map.setZoom(map.getZoom() - 1));
KeyFrame kf2 = new KeyFrame(Duration.seconds(1.5), e -> map.setZoom(map.getZoom() + 1));
Timeline timeline = new Timeline(kf1, kf2);
Platform.runLater(timeline::play);
这是使用GMapsFX，它只是JavaFX WebView上javascript引擎调用的简单Java包装器。 希望它有帮助。
链接地址: http://www.djcxy.com/p/65927.html上一篇: Google Maps & JavaFX: Display marker on the map after clicking JavaFX button