web-dev-qa-db-ja.com

Google Maps＆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ファイル（これは完全に機能します）を埋め、次にこれを実行してWebビューを更新します。

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

前にも述べたように、ブラウザでファイルを開くと期待通りの結果が得られますが、JavaFXの問題点はわかりません。これを行うより良い方法があるならば教えてください。

編集：

ExecuteScript（）メソッドを使用してJavaFXからJavascriptにデータ（GPS座標）を直接送信することで問題の解決策を見つけたので、2つのプラットフォーム間のブリッジとして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への特別な銃撃戦をありがとう。

javascriptgoogle-mapsjavafxjavafx-webengine
354
Chandler Bing

私が推測しなければならなかった場合-2つのことのうちの1つが起こっています：

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のsystem.outにconsole.log出力を取得するためのリンクを次に示します。 JavaFX 8 WebEngine：console.log（）をjavascriptからSystemに取得する方法.out in java？

...また、redditからこんにちは。

69
David G

一行で：

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

ファイルへのパスをダブルチェックしてみてください。 StackOverflowで他の答えを読むと、これはパッケージのルートと相対的で、先頭の '/'があってもなくても相対的であると思われるようです。すなわちgetResource("data/index.html")。しかし、またしても、おそらくgetResource()...に関連したエラーが発生しているでしょう。

次にデバッグするために、JSONを書いている部分をコメントアウトし、手動で良いJSONを書いて、それをwebViewに表示するようにします。可動部分が少なければ少ないほどよい。あなたがそれをあなたの事前に書かれたJSONで動作させることができるなら、あなたはそれがあなたがJavaで書いているJSONとそれからHTMLにロードされているJSONに関する何らかの問題であると仮定することができます。

編集： もう少し深く掘った。これはまた完全に間違っているかもしれませんが、おそらくあなたのウェブブラウザが通常onloadを呼び出すJavaからinitMap()関数を手動で呼び出すことを試みることができます。 ボタンクリックでJavaFX WebViewからJavaScript関数を呼び出す方法 もう少し詳細があります。ボタンでJSONを編集した後にthis.webView.getEngine().executeScript("initMap()");を試してください。

編集2 余談ですが、マップを最初に作成してからマーカーをマップに設定するために、initMapをinitMapとupdateMapの関数に分割することも意味があります。これはほとんど何も壊れていませんが。

17
Matt

マウスホイールを使って地図を拡大または縮小してマーカーが表示される場合は、私がしたのと同じ問題が発生しています。

手動でマップビューをズームしてマーカーを復元してみてください。また、ルートサービスからのルートを表示するときにもこの方法を使用する必要がありました。そうしないと、ウェイポイントマーカーが正しく表示されませんでした。

これは私の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ラッパーです。うまくいけば、それは役立ちます。

3
Fraser