MarkerWithLabel 标签中心对齐

Question

我在 Google Maps API v3 中使用 MarkerWithLabel 扩展。我想将图片下方的标签设置为居中对齐。 有一个设置标签位置的 LabelAnchor 属性，我也使用这样的 CSS 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;
}

是否可以自动对齐标签框，还是我需要计算文本宽度并手动设置 LabelAnchor？如果是这样，我如何计算文本宽度？

Answer 1

我必须手动计算和设置 LabelAnchor。还不错……我刚刚算出标签中的左侧填充量，然后是长字符串中平均字符的宽度，并添加了该值的一半。

如果浏览器使用与我预期不同的字体，此方法可能会变得不准确。一个更好的方法可能是构建一个函数，该函数可以通过 javascript 确定标签宽度，然后从那里确定标签宽度的一半。也许在 DOM 中的某个地方创建一个临时的不可见标签对象并使用 jQuery 函数来拉宽度。

Answer 2

我通过用<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 3

不是我的解决方案，但 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 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');
    });
});

Answer 7

其他解决方案也可以，但它们要么需要固定宽度、挂钩到事件中，要么需要您将内容包装在父容器中并添加一堆样式。由于标签是一个可以采用 CSS 样式的 DOM 元素，所以让标签居中的最简单方法是在 CSS 中简单地使用 transform: translateX(-50%)：

JS：

new MarkerWithLabel({
  labelAnchor: { x: 0, y: 30 },
  labelClass: 'marker-label'
})

CSS：

.marker-label {
  transform: translateX(-50%)
}

您可能需要将 labelAnchor X 增加一两个像素以使其看起来居中。