Google Maps&JavaFX:单击JavaFX按钮后在地图上显示标记

2020/09/30 17:01 · javascript ·  · 0评论

当我单击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()方法将数据(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);
  }

感谢您的评论和回答,以及特别的点球大战。

如果我不得不猜测-正在发生以下两种情况之一:

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

如果存在此问题,以下是在Java中将console.log输出输入到System.out的链接:JavaFX 8 WebEngine:如何在Java
中将console.log()从javascript获取到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。

编辑:我挖得更深一些。这可能完全是错误的,但也许您可以尝试initMap()从Java手动调用Web浏览器通常调用onload函数。如何在Button单击时从JavaFX WebView调用JavaScript函数?有更多细节。this.webView.getEngine().executeScript("initMap()");使用按钮编辑JSON后,请尝试

编辑2顺便提一句,也可以将and分割initMapinitMapandupdateMap函数以使地图开始,然后在地图上设置标记。虽然这几乎没有破坏任何东西。

如果使用鼠标滚轮来放大或缩小地图,并且出现标记,则说明您遇到的问题与我相同。

尝试手动缩放地图视图以还原标记。在显示来自“方向服务”的路线时,我还必须采用此技术,否则航点标记将无法正确显示。

这是我的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上围绕Java引擎调用的瘦Java包装器。希望它会有所帮助。

本文地址:http://javascript.askforanswer.com/google-mapsjavafxdanjijavafxanniuhouzaiditushangxianshibiaoji.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!