问题
I am reposting/rephrasing this as another user here advised. The code below works in jsbin but not in jsfiddle. Does anybody know why?
The problem originated in my attempt to include this code in a blogger post (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>
回答1:
Your <head> and <body> tags are incorrectly closed. Just have a look at the source code of the output pages (http://fiddle.jshell.net/wNaEX/show/, http://jsbin.com/osebov/1) to see how both are invalid. While JsBin expects whole HTML pages (from doctype to </html>), jsfiddle will just insert the "HTML" in the body tags of its output template. Sometimes the browser may interpret this as intended, sometimes not.
回答2:
When viewing the console in Chrome (F12), it throws the following error:
Uncaught ReferenceError: initialize is not defined
onload
So something's wrong when it tries to call initialize
来源：https://stackoverflow.com/questions/15319172/why-is-this-code-working-in-jsbin-but-not-in-jsfiddle