Question

我正在重新发布/重新发布这个，因为这里有另一位用户建议。以下代码适用于 jsbin ，但不适用于 jsfiddle 。有人知道为什么吗？

问题源于我尝试将此代码包含在博客帖子中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">&#9608;</font> $1800+<br>
  <font color="#FF2B00">&#9608;</font> $1700+<br>
  <font color="#FF5600">&#9608;</font> $1600+<br>
  <font color="#FF7F00">&#9608;</font> $1500+<br>
  <font color="#FFAB00">&#9608;</font> $1400+<br>
  <font color="#FFD500">&#9608;</font> $1300+<br>
  <font color="#FFFF00">&#9608;</font> $1200+<br>
  <font color="#7FFF00">&#9608;</font> $1100+<br>
  <font color="#00FF00">&#9608;</font> $1000+<br>
  <font color="#00FF7F">&#9608;</font> $900+<br>
  <font color="#00FFFF">&#9608;</font> $800+<br>
  <font color="#00D5FF">&#9608;</font> $700+<br>
  <font color="#00ABFF">&#9608;</font> $600+<br>
  <font color="#007FFF">&#9608;</font> $500+<br>
  <font color="#0056FF">&#9608;</font> $400+<br>
  <font color="#002BFF">&#9608;</font> $300+<br>
  <font color="#0000FF">&#9608;</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>

Answer 1

您的<head>和<body>标记未正确关闭。只需查看输出页面的源代码（http://fiddle.jshell.net/wNaEX/show/，http://jsbin.com/osebov/1），看看两者是如何无效的。虽然JsBin期望整个HTML页面（从doctype到</html>），但jsfiddle只会在其输出模板的body标签中插入“HTML”。有时浏览器可能会按预期解释，有时不会。

Answer 2

在Chrome（F12）中查看控制台时，会引发以下错误：

Uncaught ReferenceError: initialize is not defined
    onload

尝试调用initialize

时出错了

为什么这段代码在jsbin中工作但在jsfiddle中不起作用？

2 个答案: