Question

我正在尝试包含这样的页面

http://www.jefftk.com/apartment_prices/index-2011-06

在由www.blogspot.com（Google的Blogger）托管的博客中

Belows是从上一页提取的相关代码。我已经尝试通过使用HTML / JavaScript小工具并在该部分中包含脚本来解决此问题。他们都没有工作。还有其他想法吗？

<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

我在Blogger网站上尝试了上述代码，并设法将div id="map_canvas"设置为固定大小，如下所示：

<div id="map_canvas" style="width:400px; height:400px"></div>

如何在博客（blogspot.com）帖子中加入Google地图？

1 个答案: