将信息框添加到通过Google地图绘制的圆圈的右边缘

Question

试图找出如何＆＃34;附加＆＃34;一个InfoBox＆＃34;在Google地图（v3）中绘制的圆圈的左边缘。

这是我到目前为止所得到的：
http://jsfiddle.net/a1aq9ey8/6/

如果您放大/缩小地图，您会注意到InfoBox（8 MILE）位置不再与圆圈对齐...我希望infoBox保持左对齐用户放大或缩小时圆圈的左/中心边缘...这可能吗？

$(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); 
});
});

Answer 1

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

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

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

updated fiddle

代码段

＆＃13;

＆＃13;

$(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);

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

＆＃13;

html,
body,
#google-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="google-container"></div>

＆＃13;

＆＃13;

＆＃13;