Question

我正在尝试使用自定义叠加替换Google地图上的标记，以便为每个标记添加HTML。它的工作原理除了我无法弄清楚如何将覆盖层的底部覆盖在该点上，而不是将覆盖层的顶部放在该点之下。我使用超级简化的代码集来重现错误，仅用于测试（下面）。而不是我的实际HTML我只是画一个红色矩形。

问题在于绘制功能。当我将div.style.top指定给它工作的点时（但不是我想要的方式），但是当我将它切换到div.style.bottom时获取y值而不是按预期工作;红色广场不在地图上。（在我的原始程序中，标记最终以垂直镜像模式绘制，远离入侵位置。）

如何指定div.style.bottom以我想要的方式工作？

<!DOCTYPE html>
<html>
<head>
<title>Custom Overlay Test</title>
<style>
html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var overlay;
TestOverlay.prototype = new google.maps.OverlayView();

function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(38.89, -77.03)
    };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  overlay = new TestOverlay(new google.maps.LatLng(38.89, -77.03), map);
  }

function TestOverlay(point, map) {
  this.point_ = point;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
  }

TestOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '5px';
  div.style.borderColor = '#ff0000';
  div.style.position = 'absolute';
  div.style.width = '200px';
  div.style.height = '50px';
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
  };

TestOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var point = overlayProjection.fromLatLngToDivPixel(this.point_);
  var div = this.div_;
  div.style.left = point.x + 'px';
  div.style.bottom = point.y + 'px';
  };

TestOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
  };

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Answer 1

的Ta-DA;得到它了。诀窍是top和bottom的区别在于它们是使用顶部还是底部来定位元素;它们在测量方向上有所不同。两者都从父元素的顶部开始测量，但是top添加到y轴，bottom从y轴减去。所以要解决这个问题我只需要反转距离的符号：div.style.bottom = -point.y + 'px';

使用“底部”样式定位Google地图叠加层

1 个答案: