如何使用text-Google地图创建圆形叠加层

Question

我想在谷歌地图中创建一个圆形叠加层，里面有文字。我该怎么办呢。

   map = new google.maps.Map(document.getElementById('map'), options);

var circle = new google.maps.Circle({
    center: centerPosition,
    map: map,
    fillColor: '#0000FF',
    fillOpacity: 0.5,
    strokeColor: '#0000FF',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    draggable:true
});

我会为此分享小提琴。 http://jsfiddle.net/pVh3b/434/

我需要一个带有文字的圆圈，如下所示

文字也应该在拖动时移动。任何人都可以帮忙解决这个问题

Answer 1

以下内容可以帮助您入门：

http://jsfiddle.net/MSY9a/1/

使用Infobox在圆圈的中心创建一个文本框，并添加一个圆形的center_changed侦听器来更新框的位置。

google.maps.event.addListener(circle, 'center_changed', function () {
    label.setPosition(circle.getCenter());
});

我希望它有所帮助！ 欢呼声。

修改：您可以使用CSS更改框的外观。此外，删除选项'pane：“mapPane”'似乎把它放在圆圈上方。这些内容看起来更像您的示例：http://jsfiddle.net/MSY9a/2/

编辑2 ：之前链接的小提琴使用了自从删除后的外部信息框链接。更新了小提琴，链接到GitHub上的Infobox： http://jsfiddle.net/MSY9a/291/