2

我正在重新发布/改写此内容，因为这里的另一个用户建议。下面的代码在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>
4

2 回答 2

1

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

Uncaught ReferenceError: initialize is not defined
    onload

所以当它试图调用时出了点问题initialize

于 2013-03-10T17:37:11.440 回答
1

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

于 2013-03-10T17:34:32.940 回答