0

ポイントに関連付けられたラベルを作成するために、Google MapsV3APIのユーティリティライブラリの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 に答える