Google मानचित्र कस्टम मार्कर रेटिना रिज़ॉल्यूशन

Question

मैं html5 में एक आईफोन ऐप विकसित कर रहा हूं और फोनगैप के साथ निर्माण कर रहा हूं। एप्लिकेशन में कस्टम मार्कर के साथ एक गूगल मानचित्र है, जिस तरह से मार्कर आइकन बनाई गई हैं इस प्रकार है:

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30)); 
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30)); 

var marker = new google.maps.Marker({ 
       map: map, 
       position: latlng, 
       index: markers.length, 
       icon: image,      
       shadow: shadow, 
       animation: google.maps.Animation.DROP, 
       html: htmlContent             
      }); 

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

जब google.maps.Animation.DROP का उपयोग करते हुए आइकन ड्रॉप डाउन होते हैं, तो आइकन रास्ते पर उच्च रेज में दिखाया जाता है, लेकिन जब मानचित्र पर "भूमि" आइकन दिखाई देता है, तो आइकन कम रेज पर स्विच करता है संकल्प संस्करण।

क्या किसी ने कभी भी ऐसा अनुभव किया है?

धन्यवाद ...

अद्यतन बाहर मिला अगर मैं गूगल मानचित्र संस्करण की तरह यह दर्शाते हैं कि:

http://maps.googleapis.com/maps/api/js?v=3.0 

तो मुझे लगता है कि यह नवीनतम Goolge मानचित्र एपीआई में एक बग है।

Answer 1

मुझे अभी भी यह समस्या मिली है। बग उनके एपीआई के नवीनतम (v3.7) में प्रतीत होता है, इसलिए यदि आप URL पैरामीटर के माध्यम से v3.6 निर्दिष्ट करते हैं? V = 3.6 यह ठीक काम करेगा।

अद्यतन: संस्करण 3.8+ (मुझे लगता है) में आप अनुकूलित का उपयोग कर सकते हैं: एक रेटिना छवि को मजबूर करने के लिए झूठी, यदि आप एक का उपयोग कर रहे हैं। ऐसा इसलिए है क्योंकि अनुकूलित: सच आपके सभी sprites लेता है और उन्हें एक मास्टर स्प्राइट में एक साथ बुनाई देता है। इसका मतलब है कि आपको केवल तभी करना चाहिए यदि आपके पास बहुत कम मार्कर हैं। इसके अलावा, क्लस्टरर के साथ बहुत अच्छी तरह से काम नहीं करता है।

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

Answer 2

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

का कारण है लेकिन वहाँ एक सेटिंग आप का उपयोग कर MarkerOptions में बंद करने के लिए उपयोग कर सकते हैं optimized: false

var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      icon: image,      
      shadow: shadow, 
      optimized: false            
     }); 

Answer 3

मुझे छवि की चौड़ाई और ऊंचाई को परिभाषित करने के लिए size के बजाय scaledSize का उपयोग करके मेरा समाधान मिला।https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

Answer 4

स्केल्ड आकार संपत्ति के रूप में यहाँ गूगल द्वारा संदर्भित उपयोग करने के लिए सही एक है 80px पीएनजी।

Answer 5

सीधे शब्दों में url, size के साथ एक वस्तु का उपयोग करें, और scaledSize गुण:

var icon = { 
    url: 'path/img/marker@2x.png', 
    size: new google.maps.Size(30, 40), 
    scaledSize: new google.maps.Size(30, 40) 
}; 

path/img/marker@2x.png जहां एक 60px एक्स है