google-maps - 如何在使用 google map api 时显示多边形标题

Question

我在美国 map 上为每个州绘制了多边形。
我希望在它上面显示一个值(文本/整数)。我找不到任何能够在多边形顶部显示文本的多边形选项。有什么方法可以做到这一点？

var poly = new google.maps.Polygon({
                            clickable: true,
                            paths: pts,
                            strokeColor: '#000000',
                            strokeOpacity: 0.3,
                            strokeWeight: 1,
                            fillColor: colour,
                            fillOpacity: 0.8,
                            title: name
                        });
                        polys.push(poly);
                        poly.setMap(map);

Answer 1

我一直在寻找一个简单的实现，我找到了这个解决方案。希望可以帮助某人:

在您希望显示标签的位置(例如，在多边形的中间)创建一个标记

在此标记中，创建标签。

在此标记中，使用 1px x 1px 透明图像，这样图标就不会显示。

您将在多边形上方拥有标签。

代码如下:

addMarkerAsLabel = async (position, map, title) => {
var marker = new this.props.google.Marker({
  position,
  map,
  draggable: false,
  label: {
    text: title,
    color: "#FFFFFF",
    textShadow: "2px 2px 2px #000000"
  },
  icon: {
    url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjyHQt+g8ABFsCIF75EPIAAAAASUVORK5CYII="
  }
});