google-maps - 如何在谷歌地图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 设置。 - 标记的属性:

白色 5 的示例:

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

标签的位置可以通过 labelOrigin 设置。 - icon 的属性

目前尚不清楚原始图像的外观，您需要稍微尝试一下才能找到 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 的值- 属性似乎不正确。
我猜标记的尾部应该指向所需的位置。
当尾部的末端在图像的左下角时， anchor 应该是 (0,scaledHeightOfTheImage)