Как идеально расположить метку в маркере Google Maps?

Question

У меня есть несколько круговых маркеров на карте Google, использующих SVG с объектами google.map.Marker. Тем не менее, я не могу точно центрировать этикетку внутри круга. Метка может содержать 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);

Ярлык «10» выглядит немного вправо.

Что мне здесь не хватает? Или это проблема Google Maps? Работает Кодовый код здесь .

Answer 1

Метка центрирована .

Символы отображаются, так сказать, в «прямоугольниках». Не имеет значения ширина символа, границы «рамки» будут одинаковыми. Под этим я подразумеваю, что, хотя «1» является более тонким, чем «0» для перспективы пользователей, при визуализации в API Google они имеют ту же ширину, что и в «коробках».

Чтобы проверить это, измените метку на два одинаковых символа:

При переходе на «00» ясно видно, что метка отцентрирована, даже если правый 0 не сместился:

Итак, чтобы ответить на ваш вопрос о том, что мне не хватает? Ответ таков. Метки располагаются по центру - каждый символ отображается с одинаковой шириной, и создается впечатление, что он не по центру.