MarkerWithLiên kết nhãn nhãn trung tâm

Question

Tôi đang sử dụng tiện ích MarkerWithLabel trong API Google Maps v3. Tôi muốn đặt nhãn bên dưới hình ảnh để căn giữa. Có một tài sản LabelAnchor rằng thiết đặt vị trí của nhãn, và tôi cũng sử dụng một labelClass CSS như thế này:

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

Có thể tự động sắp xếp các hộp nhãn, hay tôi cần phải tính toán chiều rộng văn bản và đặt LabelAnchor theo cách thủ công? Và nếu vậy, làm thế nào để tính toán chiều rộng văn bản?

Answer 1

Không giải pháp của tôi, nhưng có một bài đăng blog tại http://shahjahanrussell.blogspot.com.au/2013/04/make-label-text-in-center-for-google.html mà làm việc cho tôi. Về cơ bản:

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

và

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

Tôi phải tính toán và đặt LabelAnchor theo cách thủ công. Nó không phải là quá xấu ... Tôi chỉ tìm ra số lượng đệm trái trong nhãn của tôi và sau đó chiều rộng của ký tự trung bình trong một chuỗi dài và thêm một nửa giá trị đó.

Phương pháp này có thể không chính xác nếu trình duyệt sử dụng phông chữ khác với tôi mong đợi. Một phương pháp tốt hơn cho điều này có thể là xây dựng một hàm có thể xác định chiều rộng nhãn thông qua javascript và một nửa nó từ đó. Có lẽ tạo một đối tượng nhãn vô hình tạm thời ở đâu đó trong DOM và sử dụng một hàm jQuery để kéo chiều rộng.

Answer 3

Tôi đã giải quyết vấn đề này bằng cách gói nội dung nhãn bằng <span>, được căn giữa bên trong một div nhãn rộng, vô hình. Phương thức này yêu cầu bạn xác định chiều rộng nhãn tối đa.

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

Chỉ cần làm điều này:

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

Và sử dụng phong cách này:

.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

Dưới đây là một giải pháp mà không cần thiết lập chiều rộng nhãn. Khi sự kiện idle của bản đồ kích hoạt lần đầu tiên, hãy định vị lại từng nhãn và làm cho nhãn hiển thị. Tôi đang sử dụng underscore.js để lặp lại các mảng.

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

Cách dễ nhất tôi đã tìm thấy là để cung cấp cho các nhãn lớp (trong trường hợp này 'đồ nhãn') và sau đó sử dụng mã này để định vị lại nhãn dựa trên chiều rộng của họ một khi bản đồ đã nạp:

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