मार्करविथ लेबल लेबल केंद्र संरेखण

Question

मैं Google मानचित्र API v3 में मार्करविथ लेबल एक्सटेंशन का उपयोग कर रहा हूं। मैं चित्र के नीचे लेबल को केंद्र गठबंधन करने के लिए सेट करना चाहता हूं। वहाँ एक LabelAnchor संपत्ति है कि लेबल की स्थिति सेट है, और मैं भी इस तरह की एक सीएसएस labelClass का उपयोग करें: ऑटो के लिए लेबल बॉक्स संरेखित

var myMarker = new MarkerWithLabel(
{ 
    position: latlng, 
    draggable: false, 
    raiseOnDrag: false, 
    map: map, 
    labelContent: "my text", 
    labelAnchor: new google.maps.Point(25, 0), //(25, 27), 
    labelClass: "my_label", // the CSS class for the label 
    labelStyle: {opacity: 0.8}, 
    icon: image, 
    labelInBackground: true, 
    labelVisible: true, 
    clickable: true, 
    zIndex: 11 
}); 

.my_label 
{ 
    color: black; 
    background-color: beige; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    text-align: center; 
    width: auto;  
    white-space: nowrap; 
    padding: 4px; 
    border: 1px solid grey; 
    border-radius:3px; 
    box-shadow: 2px 2px 20px #888888; 
} 

क्या यह संभव है, या मैं पाठ चौड़ाई की गणना करने की जरूरत है और लेबलएन्चर मैन्युअल रूप से सेट करें? और यदि हां, तो मैं पाठ चौड़ाई की गणना कैसे करूं?

Answer 1

मेरी समाधान है, लेकिन वहाँ http://shahjahanrussell.blogspot.com.au/2013/04/make-label-text-in-center-for-google.html पर एक ब्लॉग पोस्ट को मेरे लिए काम किया है। मूलतः:

.labels{ 
    color: #fff; 
    font-weight: bold; 
    font-size: 14px; 
    opacity: 1; 
    pointer-events: none; 
    text-align: center; 
    width: 60px; 
    white-space: nowrap; 
} 

और

function initialize() { 
     map = new google.maps.Map(document.getElementById("map"), mapOptions); 
     var marker = new MarkerWithLabel({ 
      position: new google.maps.LatLng(0,0), 
      draggable: true, 
      map: map, 
      labelContent: "example", 
      labelAnchor: new google.maps.Point(30, 0), 
      labelClass: "labels", // the CSS class for the label 
      labelStyle: {opacity: 0.75} 
     }); 

     } 

Answer 2

मुझे लेबलएन्चर मैन्युअल रूप से गणना और सेट करना पड़ा। यह बहुत बुरा नहीं था ... मैंने बस अपने लेबल में बाएं पैडिंग की मात्रा और फिर एक लंबी स्ट्रिंग में औसत वर्ण की चौड़ाई और उस मूल्य के आधा जोड़ा।

यदि ब्राउज़र अपेक्षाकृत भिन्न फ़ॉन्ट का उपयोग करता है तो यह विधि संभवतः गलत हो जाती है। इसके लिए एक बेहतर तरीका एक ऐसा फ़ंक्शन बनाना हो सकता है जो जावास्क्रिप्ट के माध्यम से लेबल चौड़ाई निर्धारित कर सके और वहां से आधा हो। शायद डीओएम में कहीं अस्थायी अदृश्य लेबल ऑब्जेक्ट बनाएं और चौड़ाई खींचने के लिए एक jQuery फ़ंक्शन का उपयोग करें।

Answer 3

मैंने लेबल सामग्री को <span> के साथ लपेटकर हल किया, जो एक विस्तृत, अदृश्य, लेबल div के अंदर केंद्रित हो जाता है। इस विधि के लिए आपको अधिकतम लेबल चौड़ाई परिभाषित करने की आवश्यकता है।

http://jsfiddle.net/TT26w/7/

div.label { 
    display:block; 
    width:500px; /* Maximum width of label */ 
    margin-left:-250px; /* 1/2 maximum width of label */ 
    margin-top:-30px; /* vertical offset, negative is up */ 
    text-align:center; 
} 

div.label span { 
    display:inline-block; 
    padding: 5px 10px 5px 10px; 
    border-radius: 5px; 
    max-width:500px; /* Maximum width of label */ 
    min-width:50px; /* Minimum width of label */ 
    overflow:hidden; 
    white-space: nowrap; 
    text-overflow:ellipsis; 
    color:white; 
    background-color: rgba(80, 80, 80, 0.9); 
} 

Answer 4

बस इस कार्य करें:

labelContent: "<span><?php echo $airport->name ?></span>", 

और इस शैली का उपयोग:

.label-airport { 
    font-family: 'Arimo', sans-serif; 
    font-size: 11px; 
    height: 18px; 
    line-height: 18px; 
    overflow: visible !important; 
} 

.label-airport span { 
    color: #333; 
    background-color: white; 
    display: block; 
    margin-left: -50%; 
    text-align: center; 
    font-weight: bold; 
    padding: 0px 5px 0px 5px; 
    height: 18px; 
    width: auto; 
    display: inline-block; 
    border: 1px solid #009be0; 
    white-space: nowrap; 
    box-shadow: 3px 3px 5px rgba(0,0,0,0.15); 
} 

Answer 5

यहाँ एक समाधान की स्थापना की आवश्यकता नहीं है कि लेबल चौड़ाई। जब मानचित्र की idle ईवेंट पहली बार आग लगती है, तो प्रत्येक लेबल को दोबारा बदलें और इसे दृश्यमान बनाएं। मैं सरणी को फिर से चलाने के लिए underscore.js का उपयोग कर रहा हूं।

$(document).ready(function() { 
    // Remove setAnchor as it resets margin-left. 
    MarkerLabel_.prototype.setAnchor = function() {}; 

    var map = new google.maps.Map(document.getElementById('map'), {}); 
    var markers = []; 
    var locations = []; 
    // … 

    // Reposition each label and update the initial styles. 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
     _.each(markers, function(marker, idx) { 
      var el = $(".map-label-" + idx); 
      var width = el.width(); 
      var css = { "margin-left": -width/2.0 + "px", opacity: 1 }; 
      marker.labelStyle = css; 
      el.css(css); 
     }); 
    }); 

    // Create markers with `labelClass` set to `map-label`. 
    // Also set the initial opacity to zero in CSS. 
    _.each(locations, function(location, idx) { 
     var text = document.createTextNode(location.label); 
     var marker = new MarkerWithLabel({ 
      map: map, 
      // … 
      labelClass: "map-label map-label-" + idx, 
      labelStyle: { opacity: 0 } 
     }); 

     markers.push(marker); 
    }); 
}); 

Answer 6

सबसे आसान तरीका मैंने पाया लेबल एक वर्ग देना (इस मामले 'नक्शा लेबल' में) और फिर उनकी चौड़ाई के आधार पर लेबल स्थिति बदलने के लिए इस कोड का उपयोग करने के लिए है एक बार नक्शा लोड हो जाए:

google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
    $('.map-label').each(function() { 
     $(this).css('position', 'absolute'); 
     $(this).css('margin-left', '-' + ($(this).width()/2) + 'px'); 
    }); 
});