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




google-maps javafx-webengine (4)

أحاول عرض علامة على الخريطة عندما أنقر على زر من تطبيق جافا أف أكس الخاص بي. ما يحدث عندما نضغط على هذا الزر ، أكتب الموضع في ملف 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.


Answers

إذا كان عليّ أن أخمّن - يحدث أمران:

إما 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 في System.out في Java إذا كانت هذه مشكلة: JavaFX 8 WebEngine: كيفية الحصول على console.log () من javascript إلى System.out في java؟

... مرحبا أيضا من reddit.


على الخط:

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

أود أن محاولة التحقق من المسار إلى الملف الصحيح. قراءة الإجابات الأخرى على ، يبدو أن هذا يفترض أن يكون نسبة إلى جذر الحزمة وإما مع أو بدون القيادة '/'. أي 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 لجعل الخريطة تبدأ بها ثم إعداد العلامات على الخريطة. على الرغم من أن هذا بالكاد يكسر أي شيء.


إذا تم استخدام عجلة الفأرة لتكبير الخريطة أو تظهر وتظهر العلامة ، فإنك تواجه نفس المشكلة التي واجهتها.

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

هذا هو الكود الموجود في فئة جهاز تحكم 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 ، وهو عبارة عن غلاف Java رفيع حول مكالمات محرك جافا سكريبت في WebView من جافا سكريبت. نأمل أن يساعد.


إنشاء مشروع جديد في Android Studio مع خريطة نشاط Google. بعد إنشاء المشروع تلقائيًا SHA1 في البيان. استخدم SHA1 هذا للحصول على مفتاح API api. اختبر التطبيق الخاص بك تأكد من أنه يعمل. وبعد بناء التطبيق لك على ما المشروع.





javascript google-maps javafx javafx-webengine