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

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

其他解决方案也可以使用，但是它们要么需要固定的宽度，需要插入事件中，要么需要将内容包装在父容器中并添加一些样式。由于标签是可以采用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撞一个或两个像素，以使其在视觉上居中。

Answer 3

我找到的最简单的方法是给标签一个类（在本例中为'map-label'），然后在地图加载后使用此代码根据宽度重新定位标签：

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

Answer 4

我必须手动计算并设置LabelAnchor。这不是太糟糕......我只是计算出标签中左边距的数量，然后是长字符串中平均字符的宽度，并加上该值的一半。

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

Answer 5

这样做：

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 6

这是一个不需要设置标签宽度的解决方案。当地图的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 7

我通过用<span>包装标签内容来解决这个问题，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); }在一个宽的，不可见的标签div中居中。此方法要求您定义最大标签宽度。

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

{{1}}

MarkerWithLabel标签中心对齐

7 个答案: