如何在google map api自定义图标图像上显示标签

Question

我现在在GoogleMap上工作，并试图显示自定义图标图像上的标签如下。

var image = {
        url: "{% static "img/perch_logo_blue.png" %}",
        size: new google.maps.Size(45,45),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0,32),
        scaledSize: new google.maps.Size(20, 20)
    };

    var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
    };

    for (var i = 0; i < perches.length; i++) {
        var perch = perches[i];
        var marker = new google.maps.Marker({
          position: {lat: perch[1], lng: perch[2]},
          map: map,
          icon: image,
          label: '5',
          title: perch[0]
        });
    }

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

​

​

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

请帮帮我！

Answer 1

颜色(以及例如fontSize和fontFamily)可以通过标记的label-property来设置：

白色5的示例：

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

标签的位置可以通过icon的labelOrigin-property来设置

目前还不清楚原始图像是什么样子的，你需要稍微尝试一下，才能找到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-property的值似乎不正确。我猜标记的尾部应该指向所需的位置。当尾部位于图像的左下角时，锚点应为(0,scaledHeightOfTheImage)