0

我正在使用 Google Maps V3 API 的实用程序库中的 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);
}

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

4

1 回答 1

0

您的偏移量的问题是您假设标签的默认位置错误，标签未以该位置为中心，它位于该点下方（信息框上边框的中间位于该位置）

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

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

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

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

假设标记的宽度/高度为 10，信息框的宽度/高度为 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}
];
于 2013-02-05T22:51:48.183 回答