javascript - 信息框远离圆圈

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 度；所以无论我在 map 上单击什么地方，我都可以获得圆圈的位置，然后我将该位置添加到信息框标签的添加中。我使用以下代码来解决我的问题:

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