InfoBox標籤不會按預期偏移

Question

我正在使用Google Maps V3 API的實用工具庫中的InfoBox類來製作與點相關聯的標籤。

現在，我的目標是有標籤整齊地繞流點，但你可以看到，這是不會發生：

Image

你可以從信息框規格，pixelOffset，用於看需要一個Size對象（https://developers.google.com/maps/documentation/javascript/reference#Size）。文檔沒有說明接受哪些值的很多內容。 （I，當然希望負值。）

首先，我有一個數組與偏移值：

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的高度和信息框的寬度/高度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} 
];