×

Loading...
Ad by
  • 最优利率和cashback可以申请特批,好信用好收入offer更好。请点链接扫码加微信咨询,Scotiabank -- Nick Zhang 6478812600。
Ad by
  • 最优利率和cashback可以申请特批,好信用好收入offer更好。请点链接扫码加微信咨询,Scotiabank -- Nick Zhang 6478812600。

帮你google了一下:

http://docs.lucidinteractive.ca/index.php/Adding_A_Google_Map_to_your_site

width可以用%,height不行,估计是个bug.

有人写了函数调整大小,我大概试了一下,好像有问题,不过大致思路应该是对的。

function getWindowHeight()
{
if (window.self && self.innerHeight)
{
return self.innerHeight
}
if (document.documentElement && document.documentElement.clientHeight)
{
return document.documentElement.clientHeight;
}
return 0;
}

function resizeMap(mapId)
{
var offset = 0;
var map = document.getElementById(mapId);
for (var elem = map; elem != null; elem = elem.offsetParent)
{
offset += elem.offsetTop;
}
var windowHeight = getWindowHeight();
var height = windowHeight - offset - 10;
if (height >= 0)
{
map.style.height = height + "px";
}
}
Report

Replies, comments and Discussions:

  • 工作学习 / 专业技术讨论 / 关于HTML问题: 如何让DIV 的高度和宽度随着IE/FIREFOX BROWSER 窗口的大小的变化而变化?
    本文发表在 rolia.net 枫下论坛以下的例子是在BROWSER 中显示GOOGLE MAP
    但只在FIREFOX 中其作用, 在IE 中无法正常显示地图.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAO113DyqaH8gwQoTmNM6gmRQXq7bWTC04Ff1KKaIsErBhwE7B5xRebjx7TLK2_insr0ibSHfwHKCLaw"
    type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[


    var map = null;
    var geocoder = null;

    var mapPoint = null;
    var addr = "40 murmouth road, toronto, canada";

    function load() {
    if (GBrowserIsCompatible()) {

    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    geocoder = new GClientGeocoder();
    showAddress(addr);


    }
    }



    function showAddress(address) {
    if (geocoder) {
    geocoder.getLatLng(
    address,
    function(newPoint) {
    if (!newPoint) {
    alert(address + " not found");
    } else {

    //alert(address + " found");
    map.setCenter(newPoint, 13);
    var marker = new GMarker(newPoint);
    map.addOverlay(marker);
    marker.openInfoWindowHtml(address);
    }
    mapPoint = newPoint;
    }
    );
    }
    }

    //]]>
    </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style="margin: 10px; left: 10px; width: 100%; position: absolute; top: 10px; height: 100%;">
    </div>
    </body>
    </html>更多精彩文章及讨论,请光临枫下论坛 rolia.net
    • 帮你google了一下:
      http://docs.lucidinteractive.ca/index.php/Adding_A_Google_Map_to_your_site

      width可以用%,height不行,估计是个bug.

      有人写了函数调整大小,我大概试了一下,好像有问题,不过大致思路应该是对的。

      function getWindowHeight()
      {
      if (window.self && self.innerHeight)
      {
      return self.innerHeight
      }
      if (document.documentElement && document.documentElement.clientHeight)
      {
      return document.documentElement.clientHeight;
      }
      return 0;
      }

      function resizeMap(mapId)
      {
      var offset = 0;
      var map = document.getElementById(mapId);
      for (var elem = map; elem != null; elem = elem.offsetParent)
      {
      offset += elem.offsetTop;
      }
      var windowHeight = getWindowHeight();
      var height = windowHeight - offset - 10;
      if (height >= 0)
      {
      map.style.height = height + "px";
      }
      }