Javascript 使用；底部“；用于定位谷歌地图覆盖的样式
我正在尝试使用自定义覆盖替换Google地图上的标记，以便为每个标记生成HTML。它的工作原理是，我不知道如何将覆盖层的底部覆盖在点上，而不是将覆盖层的顶部覆盖在点下。我使用一组超级简化的代码复制了这个错误，只是为了测试（见下文）。我只是画了一个红色的矩形，而不是实际的HTML 问题出在draw函数中。当我将div.style.top指定给它工作的点时（但不是我想要的方式），但当我将其切换到div.style.bottom时，取而代之的是y值，它不会按预期工作；红场不在地图上。（在我的原始程序中，标记最终以垂直镜像模式绘制，并且远离未指定的位置。） 如何让div.style.bottom按我希望的方式工作Javascript 使用；底部“；用于定位谷歌地图覆盖的样式,javascript,css,google-maps,overlay,google-maps-markers,Javascript,Css,Google Maps,Overlay,Google Maps Markers,我正在尝试使用自定义覆盖替换Google地图上的标记，以便为每个标记生成HTML。它的工作原理是，我不知道如何将覆盖层的底部覆盖在点上，而不是将覆盖层的顶部覆盖在点下。我使用一组超级简化的代码复制了这个错误，只是为了测试（见下文）。我只是画了一个红色的矩形，而不是实际的HTML 问题出在draw函数中。当我将div.style.top指定给它工作的点时（但不是我想要的方式），但当我将其切换到div.style.bottom时，取而代之的是y值，它不会按预期工作；红场不在地图上。（在我的原始程序中
<!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>
自定义叠加测试
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var叠加；
TestOverlay.prototype=new google.maps.OverlayView（）；
函数初始化（）{
变量映射选项={
缩放：11，
中心：新谷歌。地图。地图（38.89，-77.03）
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
overlay=newtestoverlay（新的google.maps.LatLng（38.89，-77.03），map）；
}
功能测试覆盖（点、地图）{
这个点u=点；
this.map=map；
this.div=null；
这个.setMap（map）；
}
TestOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='solid'；
div.style.borderWidth='5px'；
div.style.borderColor='#ff0000'；
div.style.position='绝对'；
div.style.width='200px'；
div.style.height='50px'；
this.div=div；
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
TestOverlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var point=从LatlngToDivPixel（该点）的过度投影；
var div=this.div_2;；
div.style.left=点x+‘px’；
div.style.bottom=点.y+‘px’；
};
TestOverlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
this.div=null；
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
topbottomtopbottomdiv.style.bottom=-point.y+'px'尝试div.style.top=point.y-div.offsetHeight+'px'