🤜🏽 👨‍👩‍👧‍👦 🍜 हमने मानचित्र सेवाएँ कैसे कीं ❤️ 🥂 🙎

“सामाजिक संचार की सबसे आशाजनक तकनीकों में से एक का स्थान स्थान-आधारित सेवाओं (LBS) द्वारा प्रस्तुत किया जाता है, जो उपयोगकर्ता / मोबाइल ग्राहक के स्थान को निर्धारित करने की अनुमति देता है।
CNews (अधिक जानकारी के लिए: www.cnews.ru/reviews/index.shtml?2012/06/06/492022 ")

मेडिएगेट्स टीम पूरी तरह से इस दृश्य को साझा करती है। इसलिए, आज हम Habrasociety को बताना चाहते हैं कि हमने अपनी परियोजना के लिए जियोलोकेशन सेवाएं कैसे विकसित कीं - Mediagates.ru । पोस्ट में एक कार्टोग्राफिक सेवा का चयन, कार्यों का विवरण, हल करने के लिए कठिनाइयों और एल्गोरिदम शामिल हैं।

प्रोजेक्ट Mediagates.ru के बारे में

यह स्पष्ट करने के लिए कि यह सब क्या है, पहले परियोजना के बारे में कुछ शब्द। मध्यस्थों का मुख्य उद्देश्य संगीत के क्षेत्र में पेशेवरों को एकजुट करना है: कलाकार, निर्माता, प्रमोटर, वेन्यू और अन्य। परियोजना की क्षमताओं के बारे में और अधिक विस्तार से, साथ ही साथ इसकी वास्तुकला के बारे में, हम यहां अगले पदों पर बताएंगे। इस बीच, आप हमारी वेबसाइट पर परियोजना के बारे में पोस्ट पढ़ सकते हैं।

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

मुख्य कार्य

हमारी मुख्य और सबसे महत्वपूर्ण आवश्यकता परियोजना के अधिकांश पन्नों पर इंटरैक्टिव और स्थिर मानचित्रों की अधिकतम संभव पैठ थी। हमारी साइट की संरचना का अध्ययन करने के बाद, हम इस निष्कर्ष पर पहुंचे कि कई बुनियादी मॉड्यूल होना आवश्यक है जिन्हें हम परियोजना के विभिन्न वर्गों में रख सकते हैं:

उस पर कुछ प्रकार के मार्करों (घटनाओं, कलाकारों, प्रमोटरों, स्थानों, दुकानों, आदि) को प्रदर्शित करने की क्षमता के साथ एक इंटरेक्टिव मानचित्र और तिथि के अनुसार उन्हें फ़िल्टर करें;
एक टूर प्लानर जो कलाकारों को एक मानचित्र पर या बड़े कैलेंडर पर अपने प्रदर्शन और आंदोलनों की योजना बनाने की अनुमति देता है, खुद को विभिन्न स्थानों पर पेश करता है और अन्य उपयोगकर्ताओं से संयुक्त प्रदर्शन के बारे में प्रस्ताव प्राप्त करता है;
किसी ऑब्जेक्ट के स्थान को संपादित करने के लिए एक फॉर्म ताकि साइट पर सभी सामग्री को एक मानचित्र से जोड़ा जा सके (उदाहरण के लिए, उपयोगकर्ता के लिए यह किसी प्रकार का चेक-इन फ़ंक्शन है);
उन पर मार्करों के साथ स्टेटिक कार्ड सूचियों में वस्तुओं का वर्णन करने के लिए (अन्यथा, आपको प्रत्येक पृष्ठ पर दर्जनों कार्डों को इनिशियलाइज़ करना होगा, जो प्रदर्शन और मानचित्र सेवाओं की सीमाओं के संदर्भ में लाभहीन होगा)। साथ ही, टूर प्लानर को जेपीजी इमेज में एक्सपोर्ट करने के लिए स्टैटिक मैप्स की जरूरत थी।

आप साइट पर हमारे ब्लॉग पर पोस्ट किए गए " कार्ड के लिए सब कुछ " लेख में Mediagates.ru पर कार्ड की क्षमताओं के बारे में अधिक पढ़ सकते हैं, लेकिन यहां हम सेवाओं के कार्यान्वयन के तकनीकी पहलुओं के बारे में विशेष रूप से बात करना चाहते हैं।

बेशक, आप कहेंगे कि इन बिंदुओं में से प्रत्येक व्यक्तिगत रूप से कार्यान्वयन में अपेक्षाकृत सरल और स्पष्ट है। लेकिन हम उनमें से प्रत्येक में तल्लीन करने का प्रस्ताव करते हैं, यह समझते हैं कि कैसे उन सभी को एक परियोजना में जोड़ा जा सकता है, और उन सभी कठिनाइयों और नुकसानों से निपटना होगा जिन्हें हमें कार्यान्वयन के दौरान सामना करना पड़ा था। चलो एक बहुत ही महत्वपूर्ण निर्णय के साथ शुरू करते हैं: एक मानचित्र सेवा का विकल्प।

मानचित्र सेवा का विकल्प

मुझे लगता है, विवरण में जाना आवश्यक नहीं है, क्योंकि इस विषय पर बहुत सारे लेख और समीक्षाएं हैं। हमारे सामने मुख्य समस्या यह थी कि हमारी Google मैप्स एपीआई सेवा को डिजाइन करने की प्रक्रिया में, वे भुगतान किए गए। हमें डर था कि यह हमारी योजनाओं को खराब कर सकता है, लेकिन बार-बार विस्तृत गणना के बाद, हम Google उत्पाद का उपयोग करने के अपने निर्णय के साथ बने रहे।

हमने जिन मानचित्र सेवाओं की समीक्षा की:

गूगल मैप्स
यांडेक्स मैप्स,
क्लाउड मेड (या ओपन स्ट्रीट मैप),
बिंग,
एपीआई 2 जीआईएस।

अंतिम विश्लेषण फरवरी 2012 की शुरुआत में हुआ, तब से स्थिति बदल सकती थी, लेकिन चयन पैरामीटर निम्नानुसार थे:

येयस्क शहर की गुणवत्ता (परियोजना के विकास के प्रारंभिक चरण में यह हमारे लिए महत्वपूर्ण है कि रूसी संघ पर्याप्त रूप से तैयार किया गया था),
दुनिया भर के नक्शे बनाना (हमारे पास भविष्य के लिए महत्वाकांक्षी योजनाएं हैं),
कार्ड की उपस्थिति को अनुकूलित करने की इच्छा (परिणामस्वरूप, इसे छोड़ दिया गया),
मानचित्रों के आरंभ या किसी विशेष API के अनुरोध पर कानूनी प्रतिबंध,
जियोकोडिंग की गुणवत्ता (रूसी संघ में शामिल)।

तुलना के सामान्य छापे इस प्रकार थे:

OpenStreetMap दुनिया भर में सबसे अधिक विस्तृत निकला, लेकिन उनके पास सबसे अच्छा जियोकोडिंग एपीआई नहीं है;
यैंडेक्स मैप्स पर मैड्रिड (स्पेन की राजधानी) का ड्राइंग स्तर खराब है;
रूसी संघ के लिए बिंग खराब तरीके से तैयार है;
एपीआई 2 जीआईएस की एक अच्छी शुरुआत है - मुझे उम्मीद है कि भविष्य में लोग इस बाजार में मुख्य खिलाड़ियों के साथ प्रतिस्पर्धा करेंगे;
Google मैप्स एक फनी जियोकोडिंग एपीआई देता है, हालांकि रूसी संघ के कुछ शहरों का विवरण भुगतना पड़ता है, जो यूरोप के बारे में नहीं कहा जा सकता है (मैंने नाविक के बजाय iPad के साथ शहरों को नेविगेट करने के लिए कई बार उनके नक्शे का उपयोग किया था)। Google पे

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

Google ने हमें एक बहुत अच्छी जियोकोडिंग सेवा (Google जियोकोडिंग एपीआई) के साथ रिश्वत दी। ईमानदार होने के लिए, हमारे डेवलपर्स के पास यह सुनिश्चित करने का मौका था कि पेशेवर समुदाय में मौजूद "यैंडेक्स - सब कुछ है।" Google - कुछ भी नहीं खो गया था। ”: Google जियोकोडिंग एपीआई उपयोगकर्ता को मूल भाषा में इसे दर्ज करने की आवश्यकता के बिना बहुत, बहुत सारे पते का स्थान खोजने का प्रबंधन करता है।

Google सेवा की कमियों में, यह एक बार फिर रूस के कमजोर "ज्ञान" और शुल्क (एपीआई तक पहुंचने और कार्ड को आरम्भ करने की सीमा से अधिक होने की स्थिति में) पर जोर देने के लायक है। अब तक, मुझे कस्टम कार्ड को इनिशियलाइज़ करने की सीमा में कमी के कारण कार्ड कस्टमाइजेशन को छोड़ना पड़ा।

तो, चयनित सेवा प्रदाता Google है। तो हमारे निपटान में थे:

Google मानचित्र API v3,
Google जियोकोडिंग API v3,
Google स्टेटिक मैप्स API v2।

अब हम फ्रंट-एंड और बैक-एंड की सामान्य वास्तुकला से निपटने का प्रस्ताव रखते हैं। आइए सामने से शुरू करते हैं।

फ्रंट-एंड के मुख्य घटक

जैसा कि हमने पहले ही कहा था, हम भविष्य में दूसरे कार्ड प्रदाता के साथ काम करने की क्षमता को जल्दी से जोड़ना चाहते थे। इसलिए, हमने मौलिक कक्षाएं विकसित की हैं, जो वास्तव में, इस तरह के वर्गों का एक विस्तार है:

google.maps.Map,
google.maps.Marker,
google.maps.Geocoder।

मार्करों के लिए, हमें नामों और पॉप-अप सूचियों (उदाहरण के लिए, मार्करों के समूहों के लिए) को प्रदर्शित करने के लिए एक अतिरिक्त क्षमता की आवश्यकता थी। एक आधार के रूप में, हमने गैरी लिटिल से V3 वर्ग के लिए MarkerWithLabel लेने और इसे अपनी आवश्यकताओं के लिए संशोधित करने का निर्णय लिया।

हमने मॉड्यूल के साथ काम करने के लिए मुख्य कक्षाएं भी तैयार की हैं:

विभिन्न प्रकार के मार्करों और एक छोटे कैलेंडर (एक लेन में) के फिल्टर के साथ इंटरेक्टिव मानचित्र,
टूर प्लानर, जो प्रथम श्रेणी में बनाया गया है, एक छोटे से कैलेंडर को बड़े से बदलकर (स्वाभाविक रूप से, इसकी कार्यक्षमता का विस्तार करते हुए),
वस्तु के स्थान का संकेत देना।

बैक-एंड के मुख्य घटक

बैक-एंड को निम्नलिखित मुख्य कार्य करने थे:

बड़ी संख्या में मार्करों के डेटाबेस से एक चयन जो सामने के छोर और उनके समूह से अनुरोध की शर्तों को पूरा करता है;
सूचियों में तत्वों को प्रदर्शित करने के लिए स्थैतिक मानचित्रों का निर्माण और टूर प्लानर में वर्तमान मानचित्र दृश्य को jpg इमेज में निर्यात करना;
निरंतर वक्र के साथ उपयोगकर्ता क्रियाओं के मार्कर (या मार्कर समूह) का संयोजन।

यहां, सबसे पहले, यह मार्करों के समूहन पर ध्यान देने योग्य है, फिर हम वक्र मार्करों के संयोजन की प्रक्रिया पर विचार करेंगे, और अंत में - नक्शे के निर्यात।

मार्कर समूहन

मार्कर को समूहीकृत करने की आवश्यकता तब उत्पन्न होती है जब आपको मानचित्र पर बड़ी संख्या में वस्तुओं के साथ काम करना पड़ता है। कुछ ब्राउज़र कई दर्जन गैर-मानक मार्करों के प्रसंस्करण के साथ धीमा करना शुरू करते हैं। इससे बचने के लिए, आपको मानचित्र पर ऑब्जेक्ट्स को समूहों में संयोजित करने की आवश्यकता है।

दो प्रकार के समूह हैं: फ्रंट-एंड और बैक-एंड। पहला जावा स्क्रिप्ट में लागू किया जाता है, दूसरा सर्वर भाषा में। जावा स्क्रिप्ट समूहीकरण के लिए, कई तैयार किए गए इंजन हैं जिनका उपयोग किया जा सकता है, लेकिन सर्वर से ब्राउज़र में इतना डेटा स्थानांतरित करना भी एक कृतघ्न कार्य है - अधिक डेटा, ब्राउज़र धीमा हो जाएगा, जो अंत में सोचेंगे, जिसके परिणामस्वरूप कमी होगी साइट के साथ काम की गति और जानकारी की धारणा का बिगड़ना।

सर्वर-साइड मार्कर समूहन

हम मार्करों के सर्वर-साइड ग्रुपिंग पर बसने के बाद, हम आश्चर्यचकित होने लगे कि इस क्षेत्र में पहले से ही क्या एल्गोरिदम का आविष्कार किया गया था। यह दो सबसे सामान्य प्रकार के क्लस्टरिंग के बारे में बात करने के लिए प्रथागत है: ग्रिड-आधारित और दूरी-आधारित। पहला विकल्प सरल है, दूसरा एल्गोरिथ्म और कार्यान्वयन के मामले में कूलर है। हमने त्वरित शुरुआत के लिए पहला रास्ता लिया, लेकिन पहले से ही दूरी आधारित क्लस्टरिंग पर काम कर रहे हैं, जिसे हम निकट भविष्य में लागू करने की योजना बना रहे हैं।

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

वक्र मार्करों का संयोजन

प्रारंभ में, हमने सिर्फ एक टूटी हुई रेखा बनाने के बारे में सोचा, जो कि कालानुक्रमिक क्रम में कुछ मार्करों या मार्करों के समूहों को मानचित्र पर जोड़ देगा। यह स्पष्ट है कि यह google.maps.Polyline और google.maps.PolylineOptions classes का उपयोग करके सबसे आसानी से किया जाता है। लेकिन पहले, हमारे जीयूआई डिजाइनरों, और फिर प्रोग्रामरों ने फैसला किया कि यह एक टूटी हुई रेखा नहीं है, लेकिन एक चिकनी (जहां तक बिंदुओं के निर्माण की अनुमति देता है) वक्र की तुलना में अधिक सुंदर होगा जो हमारे उपयोगकर्ताओं के मार्करों को एकजुट करेगा।

समूहीकरण के साथ, हमने इस वक्र को सर्वर साइड पर डिज़ाइन करने का निर्णय लिया ताकि उपयोगकर्ता के कंप्यूटर को अधिभार न डालें। लघु परीक्षणों के बाद, हमने क्यूबिक स्प्लिन के साथ प्रक्षेप की विधि पर समझौता किया, जिसके परिणाम सर्वर से जावास्क्रिप्ट तक प्रेषित होते हैं, जो पहले से ही google.maps.Polyline का उपयोग करके बिंदु तक पहुंचता है।

आइए हम एल्गोरिथ्म पर ध्यान केन्द्रित करें। गणित की दृष्टि से यह कुछ भी जटिल नहीं है। PHP में हमने निम्न वर्ग बनाए:

बिंदु - बिंदु के निर्देशांक का सिर्फ एक दृश्य भंडारण
क्यूबिक - एक फ़ंक्शन का मान प्राप्त करने के लिए एक वर्ग (फॉर्म एफ (एक्स) = डी * एक्स ^ 3 + सी * एक्स ^ 2 + बी * एक्स + ए) और एक निश्चित एक्स के लिए इसकी व्युत्पत्ति और गुणांक ए, बी, सी, डी
पाली - ही प्रक्षेप

इन वर्गों में से प्रत्येक की समझ के लिए निम्न स्रोत कोड न्यूनतम हैं।

Point.inc

<?php class Point { public $x; public $y; function __construct($x, $y){ $this->x = $x; $this->y = $y; } } ?>

Cubic.inc

 <?php class Cubic { private $a; private $b; private $c; private $d; function __construct($a, $b, $c, $d){ $this->a = $a; $this->b = $b; $this->c = $c; $this->d = $d; } public function eval_($u){ return (($this->d * $u + $this->c) * $u + $this->b) * $u + $this->a; } public function eval_derivative($u){ return $this->b + $u * (2 * $this->c + 3 * $this->d * $u); } } ?>

Poly.inc

 <?php class Poly { public $points; function __construct(){ $this->points = array(); } public function push($x, $y){ array_push($this->points, new Point($x, $y)); } public function getInterpolatedPoly($stepsNum = 12, $type = 'poly'){ $i = 0; $j = 0; $u = 0; $ret = new Poly(); $sizeofPoints = sizeof($this->points); if($sizeofPoints >= 2){ $xpts = $this->xpoints(); $ypts = $this->ypoints(); $xc = $this->calcNaturalCubic($sizeofPoints - 1, $xpts); $yc = $this->calcNaturalCubic($sizeofPoints - 1, $ypts); $ret->push($xc[0]->eval_(0), $yc[0]->eval_(0)); $stepsNum = 100; for($i = 0; $i < sizeof($xc); $i++){ for($j = 1; $j <= $stepsNum; $j++){ $u = $j / $stepsNum; $nx = $xc[$i]->eval_($u); $ny = $yc[$i]->eval_($u); $ret->push($nx, $ny); } } } if($type == 'array'){ $ret_ = array(); for($i = 0; $i < sizeof($ret->points); $i++){ array_push($ret_, array( 'x' => $ret->points[$i]->x, 'y' => $ret->points[$i]->y )); } return $ret_; } return $ret; } private function xpoints(){ return $this->getPointsArray('x'); } private function ypoints(){ return $this->getPointsArray('y'); } private function getPointsArray($type){ $r = array(); $sizeofPoints = sizeof($this->points); switch($type){ case 'y': for($i = 0; $i < $sizeofPoints; $i++) array_push($r, $this->points[$i]->y); break; case 'x': default: for($i = 0; $i < $sizeofPoints; $i++) array_push($r, $this->points[$i]->x); } return $r; } private function calcNaturalCubic($n, &$x){ $gamma = array(); $delta = array(); $D = array(); $i = 0; $gamma[0] = 1.0 / 2.0; for($i = 1; $i < $n; $i++) $gamma[$i] = 1 / (4 - $gamma[$i-1]); $gamma[$n] = 1 / (2 - $gamma[$n-1]); $delta[0] = 3 * ($x[1] - $x[0]) * $gamma[0]; for($i = 1; $i < $n; $i++) $delta[$i] = (3 * ($x[$i + 1] - $x[$i - 1]) - $delta[$i - 1]) * $gamma[$i]; $delta[$n] = (3 * ($x[$n] - $x[$n - 1]) - $delta[$n - 1]) * $gamma[$n]; $D[$n] = $delta[$n]; for($i = $n - 1; $i >= 0; $i--) $D[$i] = $delta[$i] - $gamma[$i] * $D[$i + 1]; $C = array(); for($i = 0; $i < $n; $i++) $C[$i] = new Cubic($x[$i], $D[$i], 3 * ($x[$i + 1] - $x[$i]) - 2 * $D[$i] - $D[$i + 1], 2 * ($x[$i] - $x[$i + 1]) + $D[$i] + $D[$i + 1]); return $C; } } ?>

और यहां मनमाने बिंदुओं के लिए हमारे घटता के निर्माण की प्रक्रिया है। इनपुट पर, हमारे पास प्रत्येक बिंदु के x और y मानों के जोड़े के साथ $ बिंदुओं का नामांकित सरणी है।

 <?php //    require_once('Point.inc'); require_once('Cubic.inc'); require_once('Poly.inc'); //      $points = array(); for($i = 0; $i < 10; $i++) $points[$i] = array('x' => rand(100, 500), 'y' => rand(100, 500)); //   €    $_poly = new Poly(); //       foreach($points as &$point) $_poly->push($point['x'], $point['y']); //    € €  $lines = $_poly->getInterpolatedPoly(40, 'array'); //   $img = imagecreatetruecolor(600, 600); //   € ,     $whiteC = imagecolorallocate($img, 255, 255, 255); $greyC = imagecolorallocate($img, 127, 127, 127); $redC = imagecolorallocate($img, 255, 0, 0); //    imagefill($img, 0, 0, $whiteC); //   $halfOfPointWidth = 3; for($i = 0; $i < sizeof($points); $i++) imagefilledrectangle($img, $points[$i]['x'] - $halfOfPointWidth, $points[$i]['y'] - $halfOfPointWidth, $points[$i]['x'] + $halfOfPointWidth, $points[$i]['y'] + $halfOfPointWidth, $redC); //     for($i = 0; $i < sizeof($lines) - 1; $i++) imageline($img, $lines[$i]['x'], $lines[$i]['y'], $lines[$i+1]['x'], $lines[$i+1]['y'], $greyC); //       png € header('Content-Type:image/png'); imagepng($img); // €  imagedestroy($img); ?>

आउटपुट पर, हमारे पास पॉइंट्स द्वारा वक्र बनाने के लिए निर्देशांक के साथ एक सरणी है। यहाँ क्या हुआ की एक कल्पना उदाहरण है:

और कुछ सेटिंग्स को बदलकर, आप "हबहार लोगो" थीम पर एक आशुरचना बना सकते हैं।

निकट भविष्य में, हम अपने घटता को थोड़ा परिष्कृत करने की योजना बनाते हैं ताकि वे सिर्फ एक रेखा न हों, बल्कि छोटे तीर जो दिशा दिखाते हैं।

लेकिन पहले से ही अब हम मानते हैं कि हमने कलाकारों, निर्माताओं और आयोजकों को सभी को यह बताने के लिए एक सुविधाजनक और सुंदर तरीका दिया है कि वे क्या कर रहे हैं, किन आयोजनों में वे आयोजकों या वक्ताओं के रूप में भाग लेते हैं और वे एक समय या किसी अन्य स्थान पर रहने वाले हैं।

स्थैतिक नक्शे और JPG को निर्यात

उपयोगकर्ता द्वारा मानचित्र और कैलेंडर पर अपने दौरे की योजना बनाने के बाद, वह संभवतः अपने दोस्तों को सोशल नेटवर्क पर सूचित करना या इस जानकारी को अपने ब्लॉग पर प्रकाशित करना चाहेगा। ऐसा करने के लिए, हमने JPG प्रारूप में उपयोगकर्ता के कंप्यूटर पर सभी मार्करों के साथ वर्तमान मानचित्र दृश्य को सहेजना संभव बना दिया।
हमने इसे इस तरह से लागू किया: जब आप "जेपीजी के रूप में सहेजें" बटन पर क्लिक करते हैं, तो जावा स्क्रिप्ट मानचित्र के वर्तमान दृश्य और उस पर मार्कर के बारे में सभी जानकारी सर्वर पर भेजता है, जो Google स्टेटिक मैप्स एपीआई का उपयोग करके नक्शे के वांछित टुकड़े को लोड करता है, उस पर मार्कर रखता है और इसे बचाता है। अस्थायी फ़ाइल संग्रहण, जिसका लिंक ब्राउज़र में उपयोगकर्ता को वापस कर दिया जाता है।

ऐसा लगता है कि कुछ भी जटिल नहीं है: मुख्य बात यह नहीं होनी चाहिए कि Google स्टेटिक मैप्स एपीआई से छवि को लोड करने के बाद मानचित्र पर मार्करों को स्वयं रखने की कोशिश करें - यह संभावना नहीं है कि इसमें से कुछ भी अच्छा आएगा। समाधान बहुत सरल है: मानचित्र पर उनके निर्देशांक निर्दिष्ट करते समय एपीआई आपको बाहरी छवियों को रखने की अनुमति देता है।

यहाँ, एक प्रश्न हमारे लिए खुला रहा: किसी उपयोगकर्ता की दीवार पर fb.com या vk.com पर मानचित्र पोस्ट करना बेहतर कैसे होगा? हम यह नहीं कह सकते हैं कि हमने समस्या का विस्तार से अध्ययन किया है, लेकिन नक्शा को jpg इमेज के रूप में निर्यात करने से बेहतर कुछ नहीं है, और फिर इसे मैन्युअल रूप से दीवार पर प्रकाशित करना, हम साथ नहीं आए। मुझे खुशी होगी अगर आप मुझे पृष्ठभूमि में एक बड़ी छवि प्रकाशित करने का कोई तरीका बताएंगे। उसी समय, आपको यह समझने की आवश्यकता है कि यह छवि उपयोगकर्ता-उत्पन्न की अवधारणा को फिट नहीं करती है, जो आपको फेसबुक पर एक बड़े आकार के पोस्ट करने की अनुमति देती है।

नक्शा खोज

निष्कर्ष में, हम मानचित्र पर वस्तुओं की खोज के बारे में कुछ शब्द जोड़ना चाहेंगे। जब हमने इस फ़ंक्शन के बारे में सोचा, तो हमने एक ग्राफिकल इंटरफ़ेस की सुविधा और सबसे अधिक प्रासंगिक परिणाम प्राप्त करने की कोशिश की। यूआई के दृष्टिकोण से, मैं हमेशा afisha.ru पर खोज को पसंद करता हूं - आप जो कुछ भी चाहते हैं वह दर्ज करते हैं, और वह आपको बताता है कि इस अनुरोध के लिए साइट पर क्या है और यहां तक कि इसे सामग्री प्रकार द्वारा भी सॉर्ट करें।

नतीजतन, हमने खोज इंजन (या सर्वर का उपयोग किया, जैसा कि इसे कभी-कभी कहा जाता है) स्फिंक्स, जिस पर हमारी साइट पर मुख्य खोज आधारित है। इसके साथ, हमें डेटाबेस से उपयोगकर्ता के अनुरोध पर सबसे अधिक प्रासंगिक डेटा मिलता है। साथ ही, यदि उपयोगकर्ता कुछ पता खोजना चाहता है, तो हम Google जियोकोडिंग एपीआई से अनुरोध करते हैं।

डेटाबेस और पते द्वारा खोज परिणाम उपयोगकर्ता द्वारा दर्ज किए गए पहले तीन वर्णों के बाद पहले से ही प्रकार द्वारा प्रदर्शित किए जाते हैं और मानचित्र पर उस स्थान पर जाने के लिए उन पर जल्दी से क्लिक करके इसे संभव बनाते हैं जहां यह ऑब्जेक्ट स्थित है।

निष्कर्ष

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

हमने मानचित्र सेवाएँ कैसे कीं