Google地图和JavaFX：点击JavaFXbutton后在地图上显示标记
我一直在试图在地图上显示一个标记，当我点击我的JavaFX应用程序的button。 所以会发生什么是当我点击那个button，我写在一个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="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> 当我点击button，我填充JSON文件（完美的作品），然后我执行这个刷新webview：
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
正如我之前所说，当我在浏览器上打开文件时，我看到了预期的结果，但是我不知道JavaFX有什么问题。 如果有更好的方法来做到这一点，请告诉我。
编辑：
我通过使用executeScript（）方法直接将数据（GPS坐标）从JavaFX发送到Javascript，find了解决scheme，因此我不需要在两个平台之间build立一个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）不等待asynchronous的ajax响应/其他的错误。
所以我们一起做一些testing。 首先，我们可以清理这个以嵌套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());
我会尝试仔细检查文件的path是否正确。 阅读StackOverflow的其他答案，看起来这应该是相对于软件包的根目录，无论是否带有前导'/'。 即getResource("data/index.html") 。 但是，再次，也许你已经看到与getResource()相关的错误…
为了进行debugging，我接下来要做的就是注释掉你编写JSON的部分，只需手工编写一些好的JSON，然后试着让它在webView中显示出来。 运动部件越less越好。 如果你可以使用预编写的JSON来处理它，那么你可以认为这是你用Java编写的JSON的一些问题，然后将其加载到HTML。
编辑：我挖得更深一点。 这可能是完全错误的，但也许你可以尝试手动调用Java的initMap()函数，您的Web浏览器通常调用onload。 如何从button上的JavaFX WebView调用JavaScript函数单击？ 有更多的细节。 尝试this.webView.getEngine().executeScript("initMap()"); 在您使用button编辑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包装。 希望它有帮助。
