🕴🏻 ➰ 🎉 JavaFX एप्लिकेशन में Google मानचित्र का उपयोग करना ♻️ 🙆 🕯️

मैं JavaFX एप्लिकेशन में Google मैप्स का उपयोग करके अपने अनुभव के बारे में बात करना चाहता हूं। एक नक्शे को एक एप्लिकेशन में लोड करने पर विचार करें और अपने जावा कोड से लोड किए गए नक्शे के लिए Google मैप्स जावास्क्रिप्ट एपीआई v3 को कॉल करें।

कार्यान्वयन

सबसे पहले, हम जावास्क्रिप्ट में मैप इनिशियलाइज़ेशन कोड लिखेंगे, जिसे हम html पेज map.html के रूप में डिजाइन करेंगे। इसके अलावा, जैसे ही हम आगे बढ़ते हैं, हम अतिरिक्त कोड जोड़ेंगे।

map.html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=***&sensor=false"> </script> <script type="text/javascript"> var map; var marker; function initialize() { var defLatLng = new google.maps.LatLng(59.95632093391832, 30.309906005859375); var mapOptions = { center: defLatLng, zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, panControl: false }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); marker = new google.maps.Marker({ position: defLatLng, map: map, icon: "img/Pin.png" }); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

अब हमारे पास एक मानचित्र के साथ एक html पृष्ठ है। इसे किसी भी ब्राउजर में खोला जा सकता है। JavaFX के पास वेब सामग्री प्रदर्शित करने के लिए एक महान वर्ग है: javafx.scene.web.WebView। हम इसका इस्तेमाल लिखित HTML पेज को प्रदर्शित करने के लिए करेंगे। चलिए GoogleMap क्लास लिखते हैं जो हमारे JavaFX एप्लिकेशन में Google मैप का प्रतिनिधित्व करेगा। किसी अन्य JavaFX नोड (दृश्य ग्राफ नोड) के साथ मानचित्र के साथ काम करने के लिए, हम javafx.scene.Parent वर्ग से वारिस करेंगे।

GoogleMap.java

 public class GoogleMap extends Parent { public GoogleMap() { initMap(); getChildren().add(webView); } private void initMap() { webView = new WebView(); webEngine = webView.getEngine(); webEngine.load(getClass().getResource("map.html").toExternalForm()); ready = false; webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { @Override public void changed(final ObservableValue<? extends Worker.State> observableValue, final Worker.State oldState, final Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { ready = true; } } }); } private WebView webView; private WebEngine webEngine; private boolean ready; }

केवल मानचित्र प्रदर्शित करना ही पर्याप्त नहीं है। हम मानचित्र का प्रबंधन करना चाहते हैं और मानचित्र घटनाओं को पकड़ना चाहते हैं। जावास्क्रिप्ट फ़ंक्शंस तक पहुँचने के लिए, हमें netscape.javascript.JSObject क्लास का एक उदाहरण चाहिए, जो हमें initCommunication () विधि में मिलता है, जिसे GoogleMap क्लास के कंस्ट्रक्टर में कहा जाता है। इस विधि में भी, हम GoogleMap.this कोड (GoogleMap कक्षा का एक उदाहरण) को जावास्क्रिप्ट संदर्भ में छोड़ देंगे, जो जावास्क्रिप्ट कोड से GoogleMap वर्ग के तरीकों को कॉल करने में सक्षम होगा।

initCommunication ()

  private void initCommunication() { webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { @Override public void changed(final ObservableValue<? extends Worker.State> observableValue, final Worker.State oldState, final Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { doc = (JSObject) webEngine.executeScript("window"); doc.setMember("app", GoogleMap.this); } } }); } private JSObject doc;

चलो जावास्क्रिप्ट कोड से जावा कोड की कॉल को मानचित्र पर एक क्लिक की घटना को पकड़ने के उदाहरण का उपयोग करके प्रदर्शित करते हैं। अजीब लग सकता है, यह घटना तब होती है जब उपयोगकर्ता किसी मानचित्र पर क्लिक करता है और इसमें क्लिक के भौगोलिक निर्देशांक होते हैं। सबसे पहले हम ईवेंट क्लास लिखते हैं:

MapEvent.java

 public class MapEvent extends Event { public MapEvent(GoogleMap map, double lat, double lng) { super(map, Event.NULL_SOURCE_TARGET, Event.ANY); this.lat = lat; this.lng = lng; } public double getLat() { return this.lat; } public double getLng() { return this.lng; } private double lat; private double lng; }

अब हम हैंडलर को पंजीकृत करने, जावास्क्रिप्ट कोड से घटना को प्राप्त करने और हैंडलर को कॉल करने के लिए जिम्मेदार GoogleMap वर्ग के तरीकों को लिखेंगे:

GoogleMap कक्षा विधियाँ

  public void setOnMapLatLngChanged(EventHandler<MapEvent> eventHandler) { onMapLatLngChanged = eventHandler; } public void handle(double lat, double lng) { if(onMapLatLngChanged != null) { MapEvent event = new MapEvent(this, lat, lng); onMapLatLngChanged.handle(event); } } private EventHandler<MapEvent> onMapLatLngChanged;

यह केवल जावास्क्रिप्ट कोड में एक मानचित्र ईवेंट हैंडलर लिखने और उसमें GoogleMap कक्षा के हैंडल (डबल लेट, डबल लैंग) पद्धति को लिखने के लिए बना हुआ है:

get_click_position (घटना)

 function get_click_position(event){ var location = event.latLng; var lat = location.lat(); var lng = location.lng(); app.handle(lat, lng); }

अब हम जावा कोड से जावास्क्रिप्ट फ़ंक्शंस को कॉल करने के लिए एक GoogleMap क्लास विधि लिखेंगे

invokeJS (अंतिम स्ट्रिंग str)

  private void invokeJS(final String str) { if(ready) { doc.eval(str); } else { webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { @Override public void changed(final ObservableValue<? extends Worker.State> observableValue, final Worker.State oldState, final Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { doc.eval(str); } } }); } }

परिणाम

मैं नक्शे के प्रकार, नक्शे के केंद्र की स्थिति, कर्सर की स्थिति को निर्धारित करने के तरीकों को अलग से नहीं बताऊंगा। ये सभी विधियाँ पूर्ण स्रोत कोड में हैं:

GoogleMap.java

 public class GoogleMap extends Parent { public GoogleMap() { initMap(); initCommunication(); getChildren().add(webView); setMarkerPosition(0,0); setMapCenter(0, 0); switchTerrain(); } private void initMap() { webView = new WebView(); webEngine = webView.getEngine(); webEngine.load(getClass().getResource("resources/map.html").toExternalForm()); ready = false; webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { @Override public void changed(final ObservableValue<? extends Worker.State> observableValue, final Worker.State oldState, final Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { ready = true; } } }); } private void initCommunication() { webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { @Override public void changed(final ObservableValue<? extends Worker.State> observableValue, final Worker.State oldState, final Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { doc = (JSObject) webEngine.executeScript("window"); doc.setMember("app", GoogleMap.this); } } }); } private void invokeJS(final String str) { if(ready) { doc.eval(str); } else { webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { @Override public void changed(final ObservableValue<? extends Worker.State> observableValue, final Worker.State oldState, final Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { doc.eval(str); } } }); } } public void setOnMapLatLngChanged(EventHandler<MapEvent> eventHandler) { onMapLatLngChanged = eventHandler; } public void handle(double lat, double lng) { if(onMapLatLngChanged != null) { MapEvent event = new MapEvent(this, lat, lng); onMapLatLngChanged.handle(event); } } public void setMarkerPosition(double lat, double lng) { String sLat = Double.toString(lat); String sLng = Double.toString(lng); invokeJS("setMarkerPosition(" + sLat + ", " + sLng + ")"); } public void setMapCenter(double lat, double lng) { String sLat = Double.toString(lat); String sLng = Double.toString(lng); invokeJS("setMapCenter(" + sLat + ", " + sLng + ")"); } public void switchSatellite() { invokeJS("switchSatellite()"); } public void switchRoadmap() { invokeJS("switchRoadmap()"); } public void switchHybrid() { invokeJS("switchHybrid()"); } public void switchTerrain() { invokeJS("switchTerrain()"); } public void startJumping() { invokeJS("startJumping()"); } public void stopJumping() { invokeJS("stopJumping()"); } public void setHeight(double h) { webView.setPrefHeight(h); } public void setWidth(double w) { webView.setPrefWidth(w); } public ReadOnlyDoubleProperty widthProperty() { return webView.widthProperty(); } private JSObject doc; private EventHandler<MapEvent> onMapLatLngChanged; private WebView webView; private WebEngine webEngine; private boolean ready; }

map.html

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=***&sensor=false"> </script> <script type="text/javascript"> var map; var marker; function get_click_position(event){ var location = event.latLng; var lat = location.lat(); var lng = location.lng(); setMarkerPosition(lat, lng); app.handle(lat, lng); } function setMarkerPosition(lat, lng) { var clickLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(clickLatLng); } function startJumping(){ marker.setAnimation(google.maps.Animation.BOUNCE); } function stopJumping(){ marker.setAnimation(google.maps.Animation.BOUNCE); } function setMapCenter(lat, lng) { var latlng = new google.maps.LatLng(lat, lng); map.setCenter(latlng); } function switchSatellite() { var mapOptions = { mapTypeId: google.maps.MapTypeId.SATELLITE }; map.setOptions(mapOptions); setLightMarkerIcon(); } function switchRoadmap() { var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }; map.setOptions(mapOptions); setDarkMarkerIcon(); } function switchHybrid() { var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID }; map.setOptions(mapOptions); setLightMarkerIcon(); } function switchTerrain() { var mapOptions = { mapTypeId: google.maps.MapTypeId.TERRAIN }; map.setOptions(mapOptions); setDarkMarkerIcon(); } function initialize() { var defLatLng = new google.maps.LatLng(59.95632093391832, 30.309906005859375); var mapOptions = { center: defLatLng, zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, panControl: false }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); google.maps.event.addListener(map, 'click', get_click_position); marker = new google.maps.Marker({ position: defLatLng, map: map, icon: "img/Pin.png" }); app.handle(0, 0); } function setDarkMarkerIcon() { marker.setIcon("img/Pin.png"); } function setLightMarkerIcon() { marker.setIcon("img/Pin_s.png"); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

वोल्टेयर ने कहा:
"मैं आपकी राय से सहमत नहीं हो सकता, लेकिन मैं इसे व्यक्त करने के आपके अधिकार के लिए अपना जीवन देने के लिए तैयार हूं।"

JavaFX एप्लिकेशन में Google मानचित्र का उपयोग करना

कार्यान्वयन

परिणाम

More articles: