如何使用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/

使用信息框创建的圆心一个文本框,并添加了一圈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/