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;
}

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

  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;
}