如何在Google地图标记中完美地居中标签？

Question

我在谷歌地图上使用带有google.map.Marker对象的SVG有几个圆圈标记。但是，我似乎无法将标签完美地置于圆圈内。标签可以是1位或2位数。

function initMap() {
  var pos = new google.maps.LatLng(53.3163803, -6.2676661);
  var myOptions = { zoom: 15, center: pos};
  var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

  var markerA = new google.maps.Marker({
    position: pos,      
    label: {
      text: "10",
      color: "white"
    },
    icon: {
      url: 'data:image/svg+xml;charset=utf-8,' + 
        encodeURIComponent('<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"><circle cx="110" cy="110" r="100" stroke="black" fill="rgb(78, 144, 217)" fill-opacity="1.0" stroke-width="1" /></svg>'),
      size: new google.maps.Size(32, 32),
      scaledSize: new google.maps.Size(32, 32),
      anchor: new google.maps.Point(16, 16),
      labelOrigin: new google.maps.Point(16, 16)
    },
    optimized: false,
    map: map
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

标签＆＃39; 10＆＃39;看起来有点右倾。

我在这里缺少什么？或者这是谷歌地图问题？工作Codepen here。

Answer 1

labelOrigin: new google.maps.Point(24, -12)

这对我有用。

Answer 2

标签 居中。

可以说，字符在“框”内呈现。 “盒子”边界的字符宽度无关紧要。我的意思是，虽然“1”比用户视角的“0”更薄，但在谷歌API中呈现时，它们的宽度与“盒子”中的宽度相同。

测试方法的一种方法是将标签更改为两个相同的字符：

当更改为'00'时，可以清楚地看到标签居中，即使右边的0没有移动：

那么，回答你的问题我错过了什么？答案是这样的。标签是居中的 - 它只是每个角色以相同的宽度渲染，使它看起来偏离中心。