3

我想在谷歌地图中创建一个圆圈覆盖，里面有文字。我该怎么做。

   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/

我需要一个带文字的圆圈，如下所示在此处输入图像描述

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

4

1 回答 1

5

以下是应该帮助您入门的内容：

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/

于 2013-09-19T12:00:10.740 回答