टैग और क्लस्टर के साथ एपीआई 2.x के तहत Yandex.Maps प्रिंट करें

हर कोई जानता है कि लेबल और क्लस्टर के साथ एपीआई 2.x कोर मैप को प्रिंट करना बस काम नहीं करता है। अब तक, नक्शा कैनवास पर नहीं बनाया गया है, लेकिन बैकिंग (पृष्ठभूमि-छवि) के साथ divas पर। और कैनवास आपके पसंदीदा ब्राउज़र की मदद नहीं करेगा।
कार्य निर्धारित किया गया था - जल्दी से नक्शे का एक मुद्रण योग्य संस्करण बनाने के लिए। लेबल की संख्या 600 से अधिक + क्लस्टर "बॉक्स से बाहर" है।
कट के तहत काम करने का विकल्प

मानचित्र को हमेशा की तरह प्रारंभ करें - लिंक से ज़ूम और सेंटर लें

ymaps.ready(function () { var mapTypes = ['yandex#map', 'yandex#satellite', 'yandex#hybrid', 'yandex#publicMap', 'yandex#publicMapHybrid'], map = new ymaps.Map($('#map')[0], { center:[ parseFloat(<?= $request_lat?>), parseFloat(<?= $request_lng?>)], zoom:parseInt(<?= $request_zoom?>), type: mapTypes[<?= $request_mtype ? $request_mtype : 0?>] }); 

टैग के लिए एक प्रिंटर फ्रेंडली लेआउट बनाएं
यहाँ मुझे यह कहना होगा कि फ्रेंडली प्रिंटर का मतलब है कि हम बैकग्राउंड-इमेज का उपयोग नहीं करते हैं, लेकिन इमेज के साथ डिव का एक गुच्छा बनाते हैं।
मेरे टैग आइकन में 2 भाग होते हैं - एक चित्र और एक पृष्ठभूमि। दोनों प्रेत में। इसलिए ऐसी उन्मत्त शैली। मैं इसे स्पष्टता के लिए इनलाइन पर लाता हूं

  ymaps.layout.storage.add('voina#icon', ymaps.templateLayoutFactory.createClass( '<div style="position: absolute; width: 28px; height: 36px; overflow: hidden;z-index: 0; ">' + '<div style="position:absolute;width:20px;height:20px;overflow:hidden;top:4px;left:4px">' + '<img src="/img/new_buttons_21.png" style="position:absolute;left:$[properties.iconOffset]px;"></div>' + '<img src="/img/buttons7.gif" style="position: absolute; left: -264px; top: -70px; "></div>' )); 

क्लस्टर आइकन के साथ एक ही बात। मैं अंदर विभिन्न बिंदुओं के लिए क्लस्टर आइकनों के विभिन्न आकारों से परेशान नहीं था - मुझे जल्दी करना पड़ा)

  ymaps.layout.storage.add('voina#cluster', ymaps.templateLayoutFactory.createClass( '<div style="position: absolute; margin: -26px 0 0 -26px; width: 58px; height: 58px; overflow: hidden;z-index: 0; ">' + '<div style="z-index:800;position: absolute; width: 58px; height: 58px; text-align: center; font-size: 13px; line-height: 58px;">$[properties.geoObjects.length]</div>' + '<img src="/img/cluster_big.png" style="position: absolute;"></div>')); 

यहाँ हमें परत के कंटेनर मिलते हैं

  var $container = map.panes.get('layers').getElement(), 

चूंकि स्टेटिक्स में कार्ड के प्रकार अलग हैं, हम पत्राचार करते हैं और कार्ड का केंद्र प्राप्त करते हैं

  stMapTypes = {'yandex#map' : 'map', 'yandex#satellite' : 'sat', 'yandex#hybrid' : 'sat,ski', 'yandex#publicMap' : 'pmap'}, center = map.getCenter(), 

आकार एक घात है। स्थैतिक अधिकतम 650 से 450 देता है। मैंने भी परेशान नहीं किया - इसे अधिकतम होने दें
नक्शे के साथ एक div को भी इन आकारों से बड़ा नहीं होना चाहिए।
एक अच्छे तरीके से, यदि आप एक बड़े मानचित्र के साथ एक div बनाते हैं, तो आपको परत के माध्यम से एक अलग दृष्टिकोण की आवश्यकता होती है।

  size = [650, 450], 

स्टैटिक्स के लिए फॉर्म लिंक

  mapUrl = 'http://static-maps.yandex.ru/1.x/?ll='+center[1]+','+center[0]+ '&z='+map.getZoom()+'&l='+stMapTypes[map.getType()]+ '&size='+size[0]+','+size[1]; 

यहाँ जादू शुरू होता है
पूर्ण स्थिति के साथ एक div बनाएं और इसे बीच में रखें, क्योंकि फलक को व्यूपोर्ट के केंद्र से जोड़ दिया जाएगा। वास्तव में, आपको map.panes.get ('लेयर्स') पर कॉल करना होगा। getViewport () और केंद्र पढ़ें। लेकिन जब लोड हो रहा है, तो फलक बीच में है, और हमने नक्शा नहीं चलने दिया

  $('<div></div>').css({ position: 'absolute', left: -Math.round(size[0] / 2)+'px', top: -Math.round(size[1] / 2)+'px', zIndex: 800}). 

स्टैटिक्स के साथ img के अंदर डालें

  wrapInner($('<img>').attr({'src':mapUrl, width: size[0], height: size[1], border: '0'})). 

और शेष तत्वों के ऊपर परत के कंटेनर में डालें

  prependTo($container); 

अच्छी सुविधा - सभी मानचित्र घटनाओं को निष्क्रिय कर देती है। अब न तो चलें और न ही सोचें

  map.events.removeAll(); 

यहाँ मैं मानचित्र में अपने मार्कर जोड़ देता हूँ। मैंने उन्हें चर window.data में दिया है

  var len = window.data.length; if (len) { for (var i = 0, markers = [ ], properties, latLng; i < len; i++) { latLng = [parseFloat(window.data[i][1]), parseFloat(window.data[i][2])]; markers.push( new ymaps.Placemark(latLng, { iconOffset: -window.data[i][5] * 20 - 1 }, { iconLayout:'voina#icon', iconOffset: [1, 2], openBalloonOnClick: false })); } 

अब एक क्लस्टर। मार्जिन क्या है - मुझे याद नहीं है, लेकिन यह एक सामान्य नक्शे पर था

  var clusterer = new ymaps.Clusterer({margin: [20]}); 

क्लस्टर आइकन के लिए लेआउट सेट करें

  clusterer.options.set('clusterIconLayout', 'voina#cluster'); 

मैं इस फ़ंक्शन को लिखना नहीं चाहता था, लेकिन मैं समूहों को अलग तरह से नहीं खोल सकता था

  clusterer.createCluster = function (center, geoObjects) { var cluster = ymaps.Clusterer.prototype.createCluster.call(this, center, geoObjects); //          cluster.events.add('click', function(e) { e.stopImmediatePropagation(); e.preventDefault(); return false; }); return cluster; }; 

क्लस्टर में मार्कर जोड़ें

  clusterer.add(markers); 

बस के मामले में, क्लस्टर भी डूब गया है

  clusterer.events.removeAll(); 

कार्ड में एक क्लस्टर जोड़ें

  map.geoObjects.add(clusterer); } }); 

टाडा !!! सब कुछ काम करता है और प्रिंट करता है (यदि ब्राउज़र इतने सारे डोम ऑब्जेक्ट का सामना कर सकता है)
केवल एक बग - दो कॉपीराइट। कार्ड से हटाने या यहां तक ​​कि छिपने की त्रुटियों में डालने के लिए। के लिए और ठीक है।



आप यहाँ देख सकते हैं