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

【问题标题】：How to create circle overlay with text-Google map如何使用文本创建圆形叠加层-Google 地图
【发布时间】：2013-09-24 02:00:42
【问题描述】：

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

   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/

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

拖动时文本也应该移动。有人可以帮忙吗

【问题讨论】：

标签： jquery google-maps google-maps-api-3 google-maps-markers google-maps-api-2

【解决方案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/

【讨论】：