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 位置为 300 像素（！）。如果标记位于页面底部，我会在标记顶部绘制提示框，依此类推。

在此处输入图像描述

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') 在标签的 draw-functionf 中使用 mouseX 和 mouseY

于 2012-07-28T17:18:28.460 回答