如何在谷歌地图api中的自定义图标图像上显示标签

Question

我正在开发GoogleMap并尝试在自定义图标图片上显示标签，如下所示。

excute

问题是标签不在图标上，而是在图标图像旁边，如下所示。

所以我希望知道如何在蓝色图标图像上显示带有白色的标签。

请帮帮我!!!

Answer 1

可以通过标记的label - 属性设置颜色（例如fontSize和fontFamily）：

白色5：

的示例

label:{text:'5',color:'white'}

标签的位置可以通过icon

的labelOrigin - 属性进行设置

目前尚不清楚原始图片的外观，您需要稍微玩一下才能找到labelOrigin的最佳价值（预计会是google.maps.Point）。

演示：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 20,
      center: {
        lat: 52.5498783,
        lng: 13.425209099999961
      }
    }),
    marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: {
        url: 'http://i.imgur.com/YsKYfOw.png',
        size: new google.maps.Size(45, 45),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, 20),
        scaledSize: new google.maps.Size(20, 20),
        labelOrigin: new google.maps.Point(9, 8)
      },
      label: {
        text: '5',
        fontWeight: 'bold',
        fontSize: '12px',
        fontFamily: '"Courier New", Courier,Monospace',
        color: 'white'
      }
    });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>

注意：在您的示例中anchor - 属性的值似乎不正确。 我猜标记的尾部应该指向所需的位置。 当尾部的末尾位于图像的左下角时，锚点应为(0,scaledHeightOfTheImage)