Google maps 在通过谷歌地图绘制的圆的右边缘添加一个信息框

试图找出如何在谷歌地图（v3）中绘制的圆的左边缘“附加”一个信息框

以下是我目前掌握的情况：

如果放大/缩小地图，您会注意到信息框（8英里）位置不再与圆左对齐…我希望用户放大或缩小时信息框与圆的左/中心边缘保持左对齐…这可能吗

$(document).ready(function(){
//set your google maps parameters
var map; 
var bblocation = new google.maps.LatLng(37.787321,-122.258365);
var map_zoom = 11;

//set google map options
var map_options = {
    center: bblocation,
    zoom: map_zoom,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDefaultUI: true,
}

//inizialize the map
map = new google.maps.Map(document.getElementById('google-container'), map_options);

var radiusOptions = {
  strokeColor:"#222c38",
  strokeOpacity:1,
  strokeWeight:1,
  fillColor:"#ffffff",
  fillOpacity:0,
  map: map,
  center: bblocation,
  radius: 12872
};
markerCircles = new google.maps.Circle(radiusOptions);

var labelText = "8 MILE";
var myOptions = {
    content: labelText,
    boxStyle: {
    background: '#222c38',
    color: '#ffffff',
    textAlign: "center",
    fontSize: "8pt",
    width: "50px"
  },
  disableAutoPan: true,
  pixelOffset: new google.maps.Size(-45, 0),
  position:  new google.maps.LatLng(37.787321,-122.374365),
  closeBoxURL: "",
  isHidden: false,
  pane: "mapPane",
  enableEventPropagation: true
};

var mmLabel = new InfoBox(myOptions);
mmLabel.open(map);

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
});

---

您需要计算标签的位置以将其放置在圆上。使用以下方法

• 距离=圆的半径
• 航向=-90度（西）
• fromLatLng=圆的中心

代码片段：

$（文档）.ready（函数（）{
//设置您的谷歌地图参数
var映射；
var bblocation=new google.maps.LatLng（37.787321，-122.258365）；
var map_zoom=11；
//设置谷歌地图选项
变量映射_选项={
中心：地理位置，
缩放：地图缩放，
泛控制：错误，
动物控制：对，
mapTypeControl:false，
街景控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
disableDefaultUI:true，
}
//将地图个人化
map=new google.maps.map（document.getElementById（'google-container'），map\u选项）；
var radiusOptions={
strokeColor:#222c38“，
频闪不透明度：1，
冲程重量：1，
fillColor:#ffffff“，
不透明度：0，
地图：地图，
中心：地理位置，
半径：12872
};
markerCircles=newgoogle.maps.Circle（radiusOptions）；
//计算标签的位置
var labelPosn=google.maps.geometry.sphereal.computeOffset（radiusOptions.center，radiusOptions.radius，-90）；
var labelText=“8英里”；
变量myOptions={
内容：labelText，
箱式：{
背景：“#222c38”，
颜色：“#ffffff”，
textAlign：“居中”，
字体大小：“8pt”，
宽度：“50px”
},
是的，
pixelOffset:new google.maps.Size（0,0），//标签左上角
位置：labelPosn，//位于圆的左边缘
closeBoxURL:“”，
伊希登：错，
窗格：“地图窗格”，
enableEventPropagation:true
};
var mmLabel=新信息框（myOptions）；
mmLabel.open（map）；
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});
})；

html，
身体，
#谷歌容器{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

非常感谢您，我为此绞尽脑汁了一段时间。快速跟进问题…最终设计中将有3个圆半径（8英里、5英里和2英里）…是否可以在缩放时隐藏这些信息框，因为它们在缩小时会开始重叠？我更新了小提琴以限制缩小，因此重叠不会成为问题。只是想与大家分享。再次感谢geocodezip的帮助。一旦缩小，我只会隐藏标签，使它们不再有用。谢谢geocodezip，我很高兴alize我忘记了我更新的小提琴的链接：

var radiusOptions = {
  strokeColor:"#222c38",
  strokeOpacity:1,
  strokeWeight:1,
  fillColor:"#ffffff",
  fillOpacity:0,
  map: map,
  center: bblocation,
  radius: 12872
};
markerCircles = new google.maps.Circle(radiusOptions);

// calculate the position of the label
var labelPosn = google.maps.geometry.spherical.computeOffset(radiusOptions.center,radiusOptions.radius,-90);
var labelText = "8 MILE";
var myOptions = {
    content: labelText,
    boxStyle: {
    background: '#222c38',
    color: '#ffffff',
    textAlign: "center",
    fontSize: "8pt",
    width: "50px"
  },
  disableAutoPan: true,
  pixelOffset: new google.maps.Size(0, 0), // left upper corner of the label
  position:  labelPosn, // on the left edge of the circle
  closeBoxURL: "",
  isHidden: false,
  pane: "mapPane",
  enableEventPropagation: true
};