MarkerWithLabel Label Center Ausrichtung

Question

Ich verwende die MarkerWithLabel Erweiterung in Google Maps API v3. Ich möchte das Etikett unterhalb des Bildes so einstellen, dass es mittig ausgerichtet ist. Es gibt eine LabelAnchor Eigenschaft, die die Position des Etiketts setzt, und ich habe auch eine CSS labelClass wie folgt verwenden:

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; 
} 

Ist es möglich, automatisch das Etikett Feld ausrichten, oder muss ich die Textbreite berechnen und setze den LabelAnchor manuell? Und wenn ja, wie berechne ich die Textbreite?

Answer 1

Nicht meine Lösung, aber es gibt eine Blog-Post auf http://shahjahanrussell.blogspot.com.au/2013/04/make-label-text-in-center-for-google.html die für mich gearbeitet. Im Wesentlichen:

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

und

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

Ich musste den LabelAnchor manuell berechnen und einstellen. Es war nicht so schlimm ... Ich habe nur die Menge an linkem Padding in meinem Label und dann die Breite des durchschnittlichen Zeichens in einem langen String herausgefunden und die Hälfte dieses Wertes hinzugefügt.

Diese Methode wird wahrscheinlich ungenau, wenn der Browser eine andere Schriftart als erwartet verwendet. Eine bessere Methode dafür könnte darin bestehen, eine Funktion zu erstellen, die über Javascript die Etikettenbreite und von dort die Hälfte bestimmen kann. Vielleicht erstellen Sie ein temporäres unsichtbares Label-Objekt irgendwo im DOM und verwenden eine jQuery-Funktion, um die Breite zu ziehen.

Answer 3

Ich löste dies, indem ich den Etiketteninhalt mit <span> umwickelte, der in einem breiten, unsichtbaren, div. Etikett zentriert wird. Bei dieser Methode müssen Sie eine maximale Etikettenbreite definieren.

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

Genau dies tun:

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

Und diese Art verwenden:

.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

Hier ist eine Lösung, die nicht die Einstellung erfordert Etikettenbreite. Wenn das Ereignis idle der Karte zum ersten Mal ausgelöst wird, positionieren Sie jede Beschriftung neu und machen Sie sie sichtbar. Ich verwende underscore.js, um die Arrays zu iterieren.

$(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

Der einfachste Weg, die ich gefunden habe ist die Etiketten eine Klasse (in diesem Fall ‚map-label‘) und dann diesen Code verwenden, um geben Sie die Etiketten auf der Grundlage ihrer Breite neu zu positionieren, sobald die Karte geladen ist:

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