google-maps-api-3 - 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

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