我按照此处另一位用户的建议重新发布/重新表述此内容。下面的代码适用于jsbin http://jsbin.com/osebov/1/edit但不在jsfiddle http://jsfiddle.net/wNaEX/。有人知道为什么吗？
该问题源于我尝试将此代码包含在博文中（http://tetsingmaps.blogspot.ca/ http://tetsingmaps.blogspot.ca/)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var overlay;
TQOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var latlng = new google.maps.LatLng(42.345393812066433, -71.079311590576168);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var swBound = new google.maps.LatLng(42.255594, -71.18282318115234);
var neBound = new google.maps.LatLng(42.43519362413287, -70.9758);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = "http://www.jefftk.com/apartment_prices/apts-2011-06.png";
overlay = new TQOverlay(bounds, srcImage, map);
}
function TQOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
TQOverlay.prototype.onAdd = function() {
var div = document.createElement('DIV');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.opacity = .5;
img.style.filter = 'alpha(opacity=50)';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
TQOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
TQOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="legend">
<b>$/bedroom</b>
<br><br>
<font color="#FF0000">█</font> $1800+<br>
<font color="#FF2B00">█</font> $1700+<br>
<font color="#FF5600">█</font> $1600+<br>
<font color="#FF7F00">█</font> $1500+<br>
<font color="#FFAB00">█</font> $1400+<br>
<font color="#FFD500">█</font> $1300+<br>
<font color="#FFFF00">█</font> $1200+<br>
<font color="#7FFF00">█</font> $1100+<br>
<font color="#00FF00">█</font> $1000+<br>
<font color="#00FF7F">█</font> $900+<br>
<font color="#00FFFF">█</font> $800+<br>
<font color="#00D5FF">█</font> $700+<br>
<font color="#00ABFF">█</font> $600+<br>
<font color="#007FFF">█</font> $500+<br>
<font color="#0056FF">█</font> $400+<br>
<font color="#002BFF">█</font> $300+<br>
<font color="#0000FF">█</font> $300-<br>
<br>
as of 6/2011<br>
<a href="index.html">current</a><br>
<a href="rooms-2011-06.html">$/room</a><br>
(<a href="/news/2011-06-18.html">details</a>)
</div>
Your <head> and <body>标签未正确关闭。只需查看输出页面的源代码（http://fiddle.jshell.net/wNaEX/show/ http://fiddle.jshell.net/wNaEX/show/, http://jsbin.com/osebov/1 http://jsbin.com/osebov/1）看看两者如何都无效。虽然 JsBin 需要整个 HTML 页面（从 doctype 到</html>），jsfiddle 只会在其输出模板的 body 标签中插入“HTML”。有时浏览器可能会按预期解释这一点，有时则不然。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
