Question

我正在使用Google Maps V3 API的Utilities Library中的InfoBox类来制作与积分相关联的标签。

现在，我的目标是让标签整齐地围绕一个点流动，但正如您所看到的，这种情况并未发生：

从InfoBox规范中可以看出，pixelOffset采用了Size对象（https://developers.google.com/maps/documentation/javascript/reference#Size）。文档并没有详细说明接受哪些值。（当然，我想要负值。）

首先，我有一个带偏移值的数组：

var arr = [
  {x: -25, y: -25},
  {x: -25, y: 0},
  {x: -25, y: 25},
  {x: 0, y: -25},
  {x: 0, y: 0},
  {x: 0, y: 25},
  {x: 25, y: -25},
  {x: 25, y: 0},
  {x: 25, y: 25}
];

然后，一个职位：

var lat = 58.9030277;
var lng = 5.7114827999999990;

最后，循环生成标记和偏移：

for (i = 0; i < arr.length; i++) {
   marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng)
  });

  var myOptions = {
    content: '#' + (i + 1),
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(arr[i].x, arr[i].y),
    position: new google.maps.LatLng(lat, lng)
  };

  ib = new InfoBox(myOptions);
}

有没有人理解这种行为？有没有更好的方法来获得这个结果？

Answer 1

你的偏移的问题是你假设标签的错误默认位置，标签不在位置的中心，它放在点的下方（信息框的顶部边框的中间位于位置）

要获得精确的结果，您必须知道标记和信息框的宽度/高度（假设两者都是正方形）。此外，标记的宽度/高度必须可被2整除，标签的宽度/高度必须可被3整除（这里的第一个问题似乎是信息框的宽度/高度为25）。

第一个标记（左上角）必须放在：

{x:-(widthOrHeightOfInfoBox*1.5),
 y:-((widthOrHeightOfInfoBox*1.5)+(widthOrHeightOfMarker/2))}

对于其他标记，将widthOrHeightOfInfoBox添加到x或y（取决于行/列）

假设标记的宽度/高度为10，而infoBox的宽度/高度为24（请记住，它必须除以3），这应该会得到所需的结果：

var arr = [
  {x: -36, y: -41},
  {x: -36, y: -17},
  {x: -36, y:   7},
  {x: -12, y: -41},
  {x: -12, y: -17},
  {x: -12, y:   7},
  {x:  12, y: -41},
  {x:  12, y: -17},
  {x:  12, y:   7}
];

InfoBox标签不会按预期偏移

1 个答案: