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

不是我的解决方案,但是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元素，因此使标签居中的最简单方法是transform: translateX(-50%)在CSS中简单使用：

JS：

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

CSS：

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

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