Javascript 信息盒正在远离圆圈

我通过调用此函数创建圆：

function buildCircle(radius, latitude, longitude){
  return new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    draggable: true,
    fillOpacity: 0,
    map: map,
    center: new google.maps.LatLng(latitude, longitude),
    radius: radius
  });
}

function addLabelToCircle(labelText, width, latitude, longitude) { 
  var myOptions = new InfoBox({
    content: labelText,
    boxStyle: {
      position: "fixed",
      border: "none",
      marginLeft: width,
      fontSize: "10pt",
    },

    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-25, -5),
    position: new google.maps.LatLng(latitude, longitude),
    closeBoxURL: "",
    isHidden: false,
    pane: "overlayMouseTarget",
    enableEventPropagation: true
  });

  return myOptions;
}

我通过调用此函数来调用显示标签：

function buildCircle(radius, latitude, longitude){
  return new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    draggable: true,
    fillOpacity: 0,
    map: map,
    center: new google.maps.LatLng(latitude, longitude),
    radius: radius
  });
}

function addLabelToCircle(labelText, width, latitude, longitude) { 
  var myOptions = new InfoBox({
    content: labelText,
    boxStyle: {
      position: "fixed",
      border: "none",
      marginLeft: width,
      fontSize: "10pt",
    },

    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-25, -5),
    position: new google.maps.LatLng(latitude, longitude),
    closeBoxURL: "",
    isHidden: false,
    pane: "overlayMouseTarget",
    enableEventPropagation: true
  });

  return myOptions;
}

这是我为这两个函数传递参数的方式：

  circle = buildCircle(185200, latitude, longitude);

  secondCircle = buildCircle(370400, latitude, longitude);

  thirdCircle = buildCircle(555600, latitude, longitude);

  ibLabel = addLabelToCircle("100", "90px", latitude, longitude);
  ibLabel.open(map);

  ibLabel2 = addLabelToCircle("200", "150px", latitude, longitude);
  ibLabel2.open(map);

  ibLabel3 = addLabelToCircle("300", "230px", latitude, longitude);
  ibLabel3.open(map);

问题是，当我缩小时，我会看到以下显示：

原来是这样的,

---

如何使长方体样式在放大或缩小时保持原样（如图2）？

我使用几何体库检查圆的原始位置，然后将其添加90度；所以我可以在地图上的任何地方得到圆圈的位置，然后我把这个位置添加到信息框标签中。我使用以下代码来解决我的问题：

ibLabel = window.MAP.addLabelToCircle("100", // This code was used in a google listener
window.MAP.labelPosition(circle));
ibLabel.open(map);

ibLabel2 = window.MAP.addLabelToCircle("200", 
window.MAP.labelPosition(secondCircle));
ibLabel2.open(map);

ibLabel3 = window.MAP.addLabelToCircle("300", 
window.MAP.labelPosition(thirdCircle));
ibLabel3.open(map); // this is the last line that was in the google listener

window.MAP.labelPosition = function(circle) {
   return google.maps.geometry.spherical.computeOffset(circle.center, 
   circle.radius, +90);
}

window.MAP.addLabelToCircle = function(labelText, labelPosn) { 
var myOptions = new InfoBox({
content: labelText,
boxStyle: {
  border: "none",
  textAlign: "center",
  fontSize: "10pt",
  width: "80px",
},

disableAutoPan: false,
pixelOffset: new google.maps.Size(-25, -5),
position: new google.maps.LatLng(labelPosn.lat(), labelPosn.lng()),
closeBoxURL: "",
isHidden: false,
pane: "overlayMouseTarget",
enableEventPropagation: true
});

return myOptions;
}

可能重复的