ब्राउज़र प्रिंट पर Google मानचित्र (V3)

Question

मेरे पास पृष्ठ चौड़ाई का 100% सेट है। मानचित्र में एक मार्कर है और उस मार्कर पर केंद्रित है। जब मैं ब्राउज़र प्रिंट करता हूं, तो मैं चाहता हूं कि नक्शा मार्कर पर केंद्रित रहे।

var lastPos = map.getCenter(); 
google.maps.event.addListener(map, "idle", function() { 
    lastPos = map.getCenter(); 
    console.log(lastPos.toString()); 
});  

google.maps.event.addDomListener(window, "resize", function() { 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(lastPos); 
    console.log("Re-center on " + lastPos.toString()); 
}); 

यह काम करता है जब मैं फिर से आकार अपने ब्राउज़र है, लेकिन जब ब्राउज़र को फिर से आकार अपने आप से पहले मुद्रण काम नहीं करता है: यह कोड मैं ऐसा करने के लिए लिखा है। यदि मेरा ब्राउज़र एक निश्चित चौड़ाई से ऊपर है तो नक्शा मुद्रित होने पर मार्कर पूरी तरह से पृष्ठ (दाईं ओर) से स्थानांतरित हो जाता है। http://www-sf.talispoint.com/testmapprint.html

Answer 1

आपको @media प्रिंट जोड़ने और प्रिंट करने पर मानचित्र को आकार देने की आवश्यकता होगी और फिर आप नीचे बताए गए अनुसार कर सकते हैं।

जब नक्शा मुद्रित होता है तो क्या होता है यह है कि शीर्ष बाएं कोने रखा जाता है और नक्शा @media प्रिंट आकार फिट करने के लिए समायोजित किया जाता है।

यदि आप केंद्र को वही रखना चाहते हैं तो आपको मानचित्र के केंद्र को मैन्युअल रूप से बदलने की आवश्यकता है। http://jsbin.com/owiwox/33 इस पर काम करने के तरीके पर एक उदाहरण है।

यह प्रिंट मीडिया के लिए एक श्रोता का उपयोग करता है लागू किया जा रहा घटना और कैसे नक्शा बदल गया है पर एक अनुपात का उपयोग कर नक्शे के केंद्र समायोजित कर देता है (छोटा बनाया)

एक बात आप देखभाल करने के लिए कि है की है कि आपको इस ब्राउजर यह सभी ब्राउज़रों पर काम करने के लिए (यह समाधान क्रोम में अच्छी तरह से काम करता है) लक्षित करने के लिए हो सकता है यह ब्राउज़रों में काम करने के लिए एक अच्छा संसाधन है: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

नमूना से js कोड ऊपर को सुनता है प्रिंट अनुरोध और मानचित्र को स्थानांतरित करता है ताकि शीर्ष बाएं कोने में बड़े मानचित्र के समान केंद्र हो।

पूरी कहानी ही समाप्त हो करने के लिए, यह यह कैसे काम करता

1. आप मानचित्र बनाम मुद्रित नक्शे के अनुपात में डाल (या जे एस से चेक करके उसे आकार मिलता है) आप आवंटित करने के लिए की जरूरत है यह: var widthRatio = 2; var heightRatio = 3;

2. आप और केंद्र बदलाव इतना है कि यह

3. परिवर्तन नहीं करता है के बाद आप प्रिंट खत्म, आप परिवर्तन को वापस लाने प्रिंट मीडिया के लिए लागू किया जा रहा सुन।

अभी भी आपको समस्या है कि मानचित्र का एक हिस्सा काटा जाएगा, लेकिन यहां कोई अच्छा समाधान नहीं है, क्योंकि ज़ूम स्तर -1 टाइल्स को कैश नहीं किया जा सकता है, इसलिए जब आप सीमाओं को फिट करने के लिए ज़ूम आउट करते हैं आपको कोई टाइल्स नहीं मिल सकता है।

Answer 2

यह अपने 'मुद्रण' या 'प्रिंटर' के साथ समस्या यह लगता है:

यहाँ मेरी परीक्षण का मामला है।

मैं एक परीक्षण किया:

1. लोड परीक्षण मानचित्र और ब्राउज़र बहुत व्यापक

2. मुद्रण पूर्वावलोकन बनाने के लिए और समस्या आप

3. वर्णित लेकिन देखा: मैं बदल सकते हैं 30% कहने के लिए 'श्रिंट टू फिट' (आईई और एफएफ के लिए डिफ़ॉल्ट) से प्रिंटिंग स्केल और स्क्रीन पर दिखाई देने वाले मानचित्र को मुद्रित करने में सक्षम था।

एक और सोचा है:

अगर है कि नक्शे के आकार बदलने के पहले ट्रिगर किया जाएगा आप मानचित्र div चौड़ाई सीमित करने के लिए प्रिंट के लिए एक और सीएसएस का उपयोग करने की कोशिश कर सकते हैं, लेकिन मुझे यकीन है कि नहीं कर रहा हूँ (आप उल्लेख कर सकते हैं इस पोस्ट के लिए: Javascript Event Handler for Print)