Google मानचित्र इन्फोबबल पिक्सेल ऑफसेट (मार्कर के ऊपर डिफ़ॉल्ट स्थिति से आगे बढ़ना)

Question

मैं एक कस्टम जानकारी बबल लागू करने की कोशिश कर रहा हूं जिसमें शीर्ष पर डिफ़ॉल्ट स्थिति की बजाय मार्कर के पक्ष में खुलने वाला बॉक्स है। यह अपेक्षा से कठिन हो गया है।

सामान्य जानकारी का उपयोग करके आप पिक्सेल ऑफसेट का उपयोग कर सकते हैं। documentation

जानकारी का उपयोग करके यह मामला प्रतीत नहीं होता है। क्या किसी भी जानकारी में पिक्सेल ऑफसेट का उपयोग करने के बावजूद, या कुछ ऐसा ही करेगा जो एक ही काम करेगा?

मैं इस तरह के रूप में इस देता है कोई भी संगत परिणाम Google Search

नीचे अपने सभी संसाधनों मैं उपयोग कर रहा है है एक गूगल खोज का उपयोग कर के रूप में, यह बहुत मुश्किल के लिए खोज करने के लिए मिल गया है।

• जानकारी का उदाहरण बबल here।

• मेरा जावास्क्रिप्ट मानचित्र और जानकारी सेट करने के लिए बबल here।

और अब यहां मेरी जावास्क्रिप्ट बस जेएसफ़ील्ड लिंक टूटा हुआ है।

<script type="text/javascript"> 

    $(document).ready(function() { 
     init(); 
    }); 

    function init() { 

     //Setup the map 
     var googleMapOptions = { 
      center: new google.maps.LatLng(53.5167, -1.1333), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     //Start the map 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
     googleMapOptions); 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(53.5267, -1.1333), 
      title: "Just a test" 
     }); 

     marker.setMap(map); 

     infoBubble = new InfoBubble({ 
      map: map, 
      content: '<div class="phoneytext">Some label</div>', 
      //position: new google.maps.LatLng(-35, 151), 
      shadowStyle: 1, 
      padding: '10px', 
      //backgroundColor: 'rgb(57,57,57)', 
      borderRadius: 5, 
      minWidth: 200, 
      arrowSize: 10, 
      borderWidth: 1, 
      borderColor: '#2c2c2c', 
      disableAutoPan: true, 
      hideCloseButton: false, 
      arrowPosition: 7, 
      backgroundClassName: 'phoney', 
      pixelOffset: new google.maps.Size(130, 120), 
      arrowStyle: 2 
     }); 
     infoBubble.open(map, marker); 

    } 
</script> 

अद्यतन

इस सवाल का मैं एक साथ यहाँ डाल दिया है, एक परीक्षण मामला का जवाब देने के साथ मदद करने के लिए। महत्वपूर्ण रेखाएं लाइनें हैं 0 & 39, जो निर्दिष्ट करना चाहिए कि लेबल को कहां रखा जाए।

अद्यतन 2

इनाम के लिए मैं infoBubble का एक उदाहरण मार्कर ऊपर उसके डिफ़ॉल्ट स्थिति से दूर तैनात देखने की जरूरत से सम्मानित किया जाना है। अधिमानतः मार्कर के दाईं ओर।

अद्यतन 3

मैं अद्यतन 1 से testcase को हटा दिया है, क्योंकि यह मेरे पुराने कंपनी के सर्वर पर होस्ट की है।

Answer 1

ऐसा लगता है कि जानकारी बबल लाइब्रेरी खुद मार्कर के ऊपर बबल को पोजीशन करने के लिए डिफ़ॉल्ट है, यह बाध्य है। लाइब्रेरी में शामिल नमूना फ़ाइल पर एक नज़र डालें: http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/examples/example.html। विशेष रूप से लाइन 99 से लाइन 122 और दो infobubbles के उपयोग से नोटिस।पहला व्यक्ति मार्कर से जुड़ा हुआ है, हालांकि दूसरा एक स्टैंडअलोन है और इस प्रकार यदि आप लाइन 106 देखते हैं, तो आप इसकी स्थिति को परिभाषित कर सकते हैं। अब, इस समझ के आधार पर मैंने आपके लिए इस उदाहरण http://jsfiddle.net/pDFc3/ में एक उदाहरण बनाया है। InfoBubble मार्कर के दाईं ओर स्थित है।

यह अजीब बात है क्योंकि infoBubble js पुस्तकालय setPosition (http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js?r=206) को देखने के लाइन 1027. के लिए लेकिन अगर किसी कारण के बाद मैं डोम के लिए प्रतीक्षा एक समारोह लोड और जा रहा infoBubble.setPosition(newLatLng); मैं काम नहीं करता द्वारा स्थिति को बदलने की कोशिश करने के लिए किया । इसके विपरीत, डीओएम लोड के बाद infoBubble.getPosition(); घोषित करने से मुझे मार्कर की वर्तमान स्थिति मिलती है, जानकारी बबल बाध्य है। तो सेटपोजिशन() में जेएस लाइब्रेरी में एक बग हो सकती है, क्योंकि मेरा मानना ​​है कि यह अभी भी काम कर रहा है (मैं गलत हो सकता है कि यह सिर्फ छोटी है)।

---

मैं जब ज़ूम इन और आउट, और स्थिति infoBubble तदनुसार (http://jsfiddle.net/pDFc3/) के लिए आपकी समस्या का समाधान करने के लिए अपने jsFiddle सुलझा लिया है। मुझे तर्क को पहले समझाएं। सबसे पहले, सड़क मानचित्र प्रकार के लिए Google मानचित्र पर अधिकतम ज़ूम स्तर 21 है - यह मान उपग्रह इमेजरी के लिए असंगत है लेकिन अधिकतम ज़ूम उपयोगकर्ता 21 तक जा सकता है। 21 से, प्रत्येक बार जब आप दो बिंदुओं के बीच अंतर को ज़ूम आउट करते हैं लगातार "स्क्रीन पर" निम्नलिखित तर्क के आधार पर रखा:

consitent_screen_dist = initial_dist * (2^(21 - zoomlevel)) 

हमारे मामले में, प्रारंभिक दूरी के लिए उचित मूल्य 0.00003 डिग्री (मार्कर और infoBubble के बीच) था। तो, यह तर्क के आधार पर मैं मार्कर और infoBubble के बीच प्रारंभिक अनुदैर्ध्य दूरी खोजने के लिए निम्नलिखित टुकड़ा कहा:

var newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom()))); 

इसी तरह, यह सुनिश्चित करने के दूरी प्रत्येक ज़ूम स्तर परिवर्तन पर लगातार रहता है हम बस के रूप में एक नया देशांतर घोषित हम ज़ूम स्तर में बदलाव के लिए सुनने:

google.maps.event.addListener(map, "zoom_changed", function() { 
     newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom()))); 
     infoBubble.setPosition(new google.maps.LatLng(marker.getPosition().lat(), newlong));     
    }); 

ध्यान रखें कि आप इस कोड को और अधिक कुशल marker.getPosition और अन्य मूल्यों कि तरीकों के माध्यम से कहा जाता है के लिए चर की घोषणा के द्वारा कर सकते हैं। ताकि विधि कॉल दोहराया न जाए और अपना कोड धीमा न करें।

Answer 2

दुर्भाग्य से InfoBubble में पिक्सेल ऑफसेट जैसे कोई विकल्प नहीं है। लेकिन अगर आप अपने उदाहरण में मार्कर के ऊपर बबल को ऊपर ले जाना चाहते हैं तो आपको बबल प्रारंभिकरण पर मानचित्र पैरामीटर सेट नहीं करना चाहिए। निम्नलिखित बेला पर विचार करें (मैं इसे आप के लिए तय हो गई):

http://jsfiddle.net/ssrP9/5/

---

पी.एस. आपका बेवकूफ काम नहीं करता है क्योंकि आपने संसाधनों को ठीक से नहीं जोड़ा है http://doc.jsfiddle.net/basic/introduction.html#add-resources

Answer 3

मैं अभी भी एक ही मुद्दे पर आया हूं लेकिन कहीं भी जवाब नहीं मिला। थोड़ा परीक्षण और त्रुटि के माध्यम से मैंने इसे काम किया।

आप "infoBubble" के लिए Google जेएस फ़ाइल का उपयोग करेंगे। के लिए खोज इस फाइल में जाकर ...

InfoBubble.prototype.buildDom_ = function() { 

मेरे लिए, यह लाइन 203 पर है (लेकिन है कि पिछले पुथल और संपादन का नतीजा हो सकता है)।

उस फ़ंक्शन के भीतर आपको "पूर्ण" घोषणा स्थिति दिखाई देगी। एक नई लाइन पर, आप मार्जिनटॉप, मार्जिन राइट, मार्जिनबॉटम और मार्जिन लेफ्ट जोड़ सकते हैं। यह बुलबुला को अपनी डिफ़ॉल्ट स्थिति से हटा देगा (जो आपकी कॉन्फ़िगरेशन में तीर स्थिति घोषणा पर भी निर्भर है) ...

यह मेरा कोड बबल जेएस फ़ाइल में ट्विक है जो मार्कर के शीर्ष पर बबल को स्थान देता है (एक डिजाइन सुविधा के कारण) ...

var bubble = this.bubble_ = document.createElement('DIV'); 
bubble.style['position'] = 'absolute'; 
bubble.style['marginTop'] = this.px(21); 
bubble.style['marginLeft'] = this.px(1); 
bubble.style['zIndex'] = this.baseZIndex_; 

आशा है कि मदद करता है।

Answer 4

InfoBubble buildDom समारोह में, जोड़ें:

bubble.className = 'bubble-container'; 

अब आप प्रत्येक InfoBubble के लिए एक CSS वर्ग है, तो आप सीएसएस मार्जिन का उपयोग कर इसे बदल सकते हैं।

Answer 5

यह मेरा समाधान है।

InfoBubble पुस्तकालय

की जगह

पूरे InfoBubble.prototype.draw विधि

/* 
* Sets InfoBubble Position 
* */ 
InfoBubble.prototype.setBubbleOffset = function(xOffset, yOffset) { 
    this.bubbleOffsetX = parseInt(xOffset); 
    this.bubbleOffsetY = parseInt(yOffset); 
} 


/* 
* Gets InfoBubble Position 
* */ 
InfoBubble.prototype.getBubbleOffset = function() { 
    return { 
    x: this.bubbleOffsetX || 0, 
    y: this.bubbleOffsetY || 0 
    } 
} 

/** 
* Draw the InfoBubble 
* Implementing the OverlayView interface 
*/ 
InfoBubble.prototype.draw = function() { 
    var projection = this.getProjection(); 

    if (!projection) { 
    // The map projection is not ready yet so do nothing 
    return; 
    } 

    var latLng = /** @type {google.maps.LatLng} */ (this.get('position')); 

    if (!latLng) { 
    this.close(); 
    return; 
    } 

    var tabHeight = 0; 

    if (this.activeTab_) { 
    tabHeight = this.activeTab_.offsetHeight; 
    } 

    var anchorHeight = this.getAnchorHeight_(); 
    var arrowSize = this.getArrowSize_(); 
    var arrowPosition = this.getArrowPosition_(); 

    arrowPosition = arrowPosition/100; 

    var pos = projection.fromLatLngToDivPixel(latLng); 
    var width = this.contentContainer_.offsetWidth; 
    var height = this.bubble_.offsetHeight; 

    if (!width) { 
    return; 
    } 

    // Adjust for the height of the info bubble 
    var top = pos.y - (height + arrowSize) + this.getBubbleOffset().y; 

    if (anchorHeight) { 
    // If there is an anchor then include the height 
    top -= anchorHeight; 
    } 

    var left = pos.x - (width * arrowPosition) + this.getBubbleOffset().x; 

    this.bubble_.style['top'] = this.px(top); 
    this.bubble_.style['left'] = this.px(left); 

    var shadowStyle = parseInt(this.get('shadowStyle'), 10); 

    switch (shadowStyle) { 
    case 1: 
     // Shadow is behind 
     this.bubbleShadow_.style['top'] = this.px(top + tabHeight - 1); 
     this.bubbleShadow_.style['left'] = this.px(left); 
     this.bubbleShadow_.style['width'] = this.px(width); 
     this.bubbleShadow_.style['height'] = 
     this.px(this.contentContainer_.offsetHeight - arrowSize); 
     break; 
    case 2: 
     // Shadow is below 
     width = width * 0.8; 
     if (anchorHeight) { 
     this.bubbleShadow_.style['top'] = this.px(pos.y); 
     } else { 
     this.bubbleShadow_.style['top'] = this.px(pos.y + arrowSize); 
     } 
     this.bubbleShadow_.style['left'] = this.px(pos.x - width * arrowPosition); 

     this.bubbleShadow_.style['width'] = this.px(width); 
     this.bubbleShadow_.style['height'] = this.px(2); 
     break; 
    } 
}; 

साथ

और फिर आप

var infoBubble = new InfoBubble({ 
    map: map, 
    content: "My Content", 
    position: new google.maps.LatLng(1, 1), 
    shadowStyle: 1, 
    padding: 0, 
    backgroundColor: 'transparent', 
    borderRadius: 7, 
    arrowSize: 10, 
    borderWidth: 1, 
    borderColor: '#2c2c2c', 
    disableAutoPan: true, 
    hideCloseButton: true, 
    arrowPosition: 50, 
    backgroundClassName: 'infoBubbleBackground', 
    arrowStyle: 2 

}); 

द्वारा इसका उपयोग कर सकते में

फिर अंत में हम इस विधि का उपयोग करने के setBubbleOffset(x,y); InfoBubble स्थिति

infoBubble.setBubbleOffset(0,-32); 

Answer 6

तुम भी एक परिभाषित लंगर ऊंचाई का उपयोग कर सकते सेट करने के लिए;

var anchorHeight = YOURNUMBER; 

लाइन 874 infobubble.js