信息框远离圆圈

Question

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

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）？

Answer 1

我使用几何库来检查圆的原始位置，然后向它添加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;
}