我正在尝试使用自定义叠加层替换 Google map 上的标记，以便为每个标记提供 HTML。它有效，除了我无法弄清楚如何将叠加层的底部放在点上，而不是将叠加层的顶部放在点下方。我已经使用一组仅用于测试的超精简代码重现了错误(如下)。我只是绘制了一个红色矩形，而不是实际的 HTML。
问题出在绘图函数中。当我将 div.style.top 分配给它工作的点时(但不是我想要的方式)，但是当我将它切换到 div.style.bottom 获取 y 值时它不会按预期工作；红色方 block 不在 map 上。 (在我原来的程序中，标记最终以垂直镜像模式绘制，并且远离指定位置。)
如何让 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>
最佳答案
塔达；知道了。诀窍在于 top 和 bottom 的区别不仅仅在于它们是使用顶部还是底部定位元素；它们在测量方向上有所不同。两者都从父元素的顶部开始测量，但 top 增加了 y 轴，而 bottom 从 y 轴减去。所以为了解决这个问题，我只需要反转距离的符号:div.style.bottom = -point.y + 'px';
关于javascript - 使用 "bottom"样式定位谷歌地图覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29758904/