[javascript] خرائط Google و JavaFX: علامة العرض على الخريطة بعد النقر على زر JavaFX


Answers

على الخط:

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

أود أن محاولة التحقق من المسار إلى الملف الصحيح. قراءة الإجابات الأخرى على StackOverflow ، يبدو أن هذا يفترض أن يكون نسبة إلى جذر الحزمة وإما مع أو بدون القيادة '/'. أي getResource("data/index.html") . ولكن ، مرة أخرى ، ربما تشاهد أخطاء تتعلق بـ getResource() ...

سيكون الخيار التالي الذي سأذهب إليه ، من أجل تصحيح الأخطاء ، هو التعليق على الجزء الذي تكتب فيه JSON وكتابة JSON يدويًا وحاول فقط أن تجعله يظهر في عرض الويب. أقل أجزاء متحركة ، كلما كان ذلك أفضل. إذا تمكنت من تشغيله مع JSON المكتوب مسبقًا ، فيمكنك افتراض أن هناك مشكلة في JSON تكتبها مع Java ثم يتم تحميلها على HTML.

تحرير: أنا حفرت أعمق قليلا. قد يكون هذا خطأً تمامًا مرة أخرى ، ولكن ربما يمكنك محاولة الاتصال يدويًا initMap() من جافا التي يستدعي متصفح الويب الخاص بك عادة التحميل. كيف يمكن استدعاء دالة JavaScript من WebView WebF على زر انقر؟ لديه المزيد من التفاصيل. جرب هذه. this.webView.getEngine().executeScript("initMap()"); بعد تحرير JSON مع الزر الخاص بك.

تحرير 2 كما هو جانباً ، أيضًا ، قد يكون من المنطقي تقسيم initMap إلى وظيفة initMap و updateMap لجعل الخريطة تبدأ بها ثم إعداد العلامات على الخريطة. على الرغم من أن هذا بالكاد يكسر أي شيء.

Question

أحاول عرض علامة على الخريطة عندما أنقر على زر من تطبيق جافا أف أكس الخاص بي. ما يحدث عندما نضغط على هذا الزر ، أكتب الموضع في ملف JSON ، سيتم تحميل هذا الملف في ملف html الذي يحتوي على الخريطة. المشكلة تكمن في أنه يعمل بشكل مثالي عندما أفتح صفحة html في المتصفح ، لكن لا شيء يحدث في عرض الويب الخاص بـ JavaFX ، ولا أعرف لماذا!

هذا هو ملف 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 (الذي يعمل بشكل ممتاز) ثم أقوم بتنفيذ هذا لتحديث عرض الويب:

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

كما قلت من قبل ، عندما أفتح الملف على المتصفح ، أرى النتيجة المتوقعة ، لكن لا أعرف ما هي المشكلة مع JavaFX. إذا كان هناك طريقة أفضل للقيام بذلك من فضلك قل لي.

تصحيح:

لقد وجدت حلاً للمشكلة عن طريق إرسال البيانات مباشرة (إحداثيات GPS) من JavaFX إلى Javascript باستخدام طريقة executeScript () ، لذلك لا أحتاج إلى ملف 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.




Related