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




google-maps javafx javafx-webengine (4)

जब मैं अपने जावाएफएक्स एप्लिकेशन के बटन पर क्लिक करता हूं तो मैं मानचित्र पर मार्कर प्रदर्शित करने की कोशिश कर रहा हूं। तो क्या होता है जब मैं उस बटन पर क्लिक करता हूं, मैं एक JSON फ़ाइल में स्थिति लिखता हूं, यह फ़ाइल 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());

जैसा कि मैंने पहले कहा था, जब मैं ब्राउज़र पर फ़ाइल खोलता हूं तो मुझे अपेक्षित परिणाम दिखाई देता है, लेकिन मुझे नहीं पता कि जावाएफएक्स के साथ समस्या क्या है। अगर ऐसा करने का एक बेहतर तरीका है तो कृपया मुझे बताएं।

संपादित करें:

मुझे executeScript () विधि का उपयोग कर जावाएफएक्स से जावास्क्रिप्ट से सीधे डेटा (जीपीएस निर्देशांक) भेजकर समस्या का समाधान मिला, इसलिए मुझे दो प्लेटफार्मों के बीच पुल के रूप में एक जेसन फ़ाइल की आवश्यकता नहीं है। तो यह एक उदाहरण है कि कोड कैसा दिखता है:

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

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


Answers

कतार में:

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

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

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

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

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


यदि आपका माउस-व्हील मानचित्र को ज़ूम करने के लिए या मार्कर में ज़ूम करने के लिए उपयोग किया जाता है, तो आप उसी समस्या का सामना कर रहे हैं जो मैंने किया था।

मार्कर को पुनर्स्थापित करने के लिए मैन्युअल रूप से मानचित्रदृश्य ज़ूम करने का प्रयास करें। दिशानिर्देश सेवा से मार्ग प्रदर्शित करते समय मुझे इस तकनीक को भी नियोजित करना पड़ा, अन्यथा वेपॉइंट मार्कर सही तरीके से प्रदर्शित नहीं हो रहे थे।

ऐसा करने के लिए मेरे जावाफैक्स नियंत्रक वर्ग में यह कोड है:

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

यह जीएमएपीएसएफएक्स का उपयोग कर रहा था, जो जावाएफएक्स वेबव्यू पर जावास्क्रिप्ट इंजन कॉल के आसपास सिर्फ एक पतला जावा रैपर है। उम्मीद है कि यह मदद करता है।


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

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

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

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

$.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 में console.log आउटपुट प्राप्त करने का एक लिंक यहां दिया गया है यदि यह कोई समस्या है: JavaFX 8 WebEngine: जावा में जावास्क्रिप्ट से System.out में console.log () कैसे प्राप्त करें?

... reddit से भी हैलो।


@ Url.Content सापेक्ष यूआरएल लौट रहा है जो सही है। निम्नलिखित कोड आपको कोड के माध्यम से यूआरएल रीयलटीव प्राप्त करने, कोड के माध्यम से पूर्ण यूआरएल, जावास्क्रिप्ट के माध्यम से पूर्ण करने में विभिन्न विकल्प देता है:

<div>Site 'Relative Url = '@Url.Content("~")'</div>
<div>Site 'Absolute Url = '@System.Web.HttpContext.Current.Request.Url.AbsoluteUri'</div>

<script type="text/javascript">
    alert("site URL via js = " + location.href);
</script>

आपको कुछ मिल जाएगा:

साइट 'सापेक्ष यूआरएल =' / 'साइट' निरपेक्ष यूआरएल = 'http: // localhost: 14763 /'

और जेएस अलर्ट भी href / पूर्ण यूआरएल दिखा रहा है





javascript google-maps javafx javafx-webengine