javascript - Google मानचित्र और JavaFX: JavaFX बटन पर क्लिक करने के बाद मानचित्र पर डिस्प्ले मार्कर




google-maps javafx-webengine (2)

अगर मुझे अनुमान लगाना होता है - दो चीजों में से एक है:

या तो ए) आपका जावाएफएक्स क्रॉस साइट अजाक्स कॉल का समर्थन नहीं कर रहा है या बी) यह अतुल्यकालिक अजाक्स प्रतिक्रिया की प्रतीक्षा नहीं कर रहा है / कुछ और गलत हो रहा है।

तो चलो कुछ परीक्षण एक साथ करते हैं। सबसे पहले हम इस ajax कॉल घोंसला करने के लिए साफ कर सकते हैं? तो फिर तुम कुछ दिलासा जोड़ सकते हैं। बयान में यह पता लगाने के लिए कि प्रत्येक क्या वापस भेज रहा है? यदि आपको कुछ आउटपुट याद आता है तो हमें पता है कि यह कहाँ गलत है और इससे हमें चीजों को ठीक करने में मदद मिलेगी।

नोट मैंने सफलता को 'किए गए' परिवर्धन में बदल दिया है क्योंकि सफलता थोड़ी सी है, और इस प्रश्न को खत्म करने के लिए सब कुछ नेस्टेड है कि क्या किसी भी खाली को अगले कॉल (सिंक्रोनाइज़ेशन मुद्दों) में भेजा जा रहा है:

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

यहाँ जावा में System.out में कंसोल.लॉग आउटपुट प्राप्त करने पर एक लिंक दिया गया है अगर यह एक मुद्दा है: JavaFX 8 WebEngine: जावा में सिस्टम.आउट से जावास्क्रिप्ट से कंसोल.लॉग () कैसे प्राप्त करें?

... साथ ही रेडिट से हैलो।

https://code.i-harness.com

जब मैं अपने JavaFX एप्लिकेशन के एक बटन पर क्लिक करता हूं, तो मैं मानचित्र पर एक मार्कर प्रदर्शित करने की कोशिश कर रहा हूं। तो क्या होता है जब मैं उस बटन पर क्लिक करता हूं, तो मैं एक JSON फ़ाइल में स्थिति लिखता हूं, यह फ़ाइल उस HTML फ़ाइल में लोड की जाएगी जिसमें नक्शा होता है। समस्या यह है कि यह पूरी तरह से काम करता है जब मैं ब्राउज़र में HTML पेज खोलता हूं, लेकिन जावाएफएक्स के वेब दृश्य में कुछ भी नहीं होता है, और मुझे पता है कि क्यों!

यह 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 से जावास्क्रिप्ट में निष्पादित (निष्पादन विधि) का उपयोग करके समस्या का हल मिल गया, इसलिए मुझे दो प्लेटफार्मों के बीच पुल के रूप में एक json फ़ाइल की आवश्यकता नहीं है। तो यह एक उदाहरण है कि कोड कैसा दिखता है:

eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instance

और यहाँ जावास्क्रिप्ट है:

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

आपकी टिप्पणियों और उत्तरों और रेडिट के लिए एक विशेष गोलीबारी के लिए धन्यवाद।


कतार में:

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

मैं कोशिश करूँगा कि फ़ाइल की राह को डबल-चेक करना सही है। पर अन्य उत्तरों को पढ़ते हुए, ऐसा लगता है कि यह पैकेज रूट के सापेक्ष होना चाहिए और या तो अग्रणी / 'के साथ या उसके बिना होना चाहिए। getResource("data/index.html") । लेकिन, फिर, शायद आप पहले से ही getResource() से संबंधित त्रुटियाँ देख रहे getResource() ...

डिबगिंग के उद्देश्यों के लिए मेरा अगला लक्ष्य है, उस हिस्से पर टिप्पणी करना, जहां आप JSON लिखते हैं और मैन्युअल रूप से कुछ अच्छा JSON लिखते हैं और बस इसे WebView में दिखाने का प्रयास करते हैं। कम चलने वाले हिस्से, बेहतर। यदि आप इसे अपने पूर्व-लिखित JSON के साथ काम करने के लिए प्राप्त कर सकते हैं तो आप मान सकते हैं कि यह JSON आपके द्वारा लिखे जा रहे जावा के साथ कुछ समस्या है और फिर इसे HTML में लोड किया जा रहा है।

संपादित करें: मैंने थोड़ा गहरा खोदा। यह फिर से पूरी तरह से गलत हो सकता है, लेकिन शायद आप जावा से मैन्युअल रूप से initMap() फ़ंक्शन को कॉल करने का प्रयास कर सकते हैं जो आपके वेब ब्राउज़र को सामान्य रूप से initMap() कहते हैं। बटन पर एक JavaFX WebView से जावास्क्रिप्ट फ़ंक्शन कैसे कॉल करें? कुछ और विवरण हैं। यह प्रयास करें this.webView.getEngine().executeScript("initMap()"); अपने बटन के साथ JSON को संपादित करने के बाद।

संपादित करें 2 एक तरफ के रूप में भी, यह एक initMap और updateMap करने के लिए नक्शा बनाने के लिए और फिर नक्शे पर मार्करों को स्थापित करने के लिए updateMap करने के लिए एक initMap और updateMap समारोह में विभाजित करने के लिए समझ में आ सकता है। हालांकि यह शायद ही कोई तोड़ रहा हो।







javafx-webengine