1

マーカーとマップ境界の間の現在の距離を決定する必要があります。チップボックスをマーカーの左、右、上、または下に描画します。

次のコード行を使用して、tipbox の位置を設定します。

Label.prototype.draw = function() {
  var projection = this.getProjection();
  var position = projection.fromLatLngToDivPixel(this.get('position'));

  // position of tipbox, depends on margin to map boaunds
  var div = this.div_;
  var mapWidth = parseInt($('#mapBox').css('width'));
  var mapHeight = parseInt($('#mapBox').css('height'));

  div.style.left = (position.x-(parseInt(div.style.width)/2)) + 'px';
  div.style.top = position.y + 'px';      
  div.style.display = 'inline';

  $('.tipBox-inner').html(''+position.x);
};

しかし、ページをドラッグすると、position.x または position.y は同じ数のピクセルを返します。画像でわかるように、x 位置は 300px(!) にあります。マーカーがページの下部などにある場合は、マーカーの上にヒントボックスを描画します。

ここに画像の説明を入力

4

1 に答える 1

1

わかりました私は自分で解決策を見つけました。マーカーのマウスオーバー イベントでマージンまでの距離 (px) を取得します。

google.maps.event.addListener(marker, 'mouseover', function(event) {    
  label = new Label({
    map: map
  });

  label.bindTo('position', marker, 'position');

  var pixel = label.getProjection().fromLatLngToContainerPixel(event.latLng);

  label.set('mouseX', pixel.x);
  label.set('mouseY', pixel.y);
});

this.get('mouseX') を使用して、Label の draw-functionf で mouseX と mouseY を使用できるようになりました。

于 2012-07-28T17:18:28.460 に答える