如何在谷歌地图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

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

白色5的示例:

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

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

现在还不清楚原始图像是什么样子的,你需要玩一点才能找到最佳值labelOrigin(它应该是a 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)