使用「底部」樣式定位Google地圖覆蓋圖

我試圖用自定義覆蓋圖替換Google地圖上的標記，以便爲每個標記提供HTML。它的工作原理除了我不知道如何讓覆蓋層的底部超過這一點，而不是將覆蓋層的頂部放在點之下。我已經使用超級簡化代碼（僅供測試）重現了錯誤（下文）。而不是我的實際HTML，我只是畫一個紅色的矩形。使用「底部」樣式定位Google地圖覆蓋圖

問題在於繪圖函數。當我將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>

來源

2015-04-20 Michael Schade

嘗試'div.style.top = point.y-div.offsetHeight +'px';' –

Ta-da;得到它了。訣竅是top和bottom的區別在於它們是否使用頂部或底部來定位元素;它們在測量方向上有所不同。兩者都從父元素的頂部開始測量，但top添加到y軸，並且bottom從y軸減去。所以要解決這個問題，我只需要扭轉距離的符號：div.style.bottom = -point.y + 'px';

來源

2015-04-21 20:17:09

使用「底部」樣式定位Google地圖覆蓋圖

回答

相關問題