×

Loading...
Ad by
  • 推荐 OXIO 加拿大高速网络，最低月费仅$40. 使用推荐码 RCR37MB 可获得一个月的免费服务
Ad by
  • 推荐 OXIO 加拿大高速网络，最低月费仅$40. 使用推荐码 RCR37MB 可获得一个月的免费服务

@Florida

关于HTML问题: 如何让DIV 的高度和宽度随着IE/FIREFOX BROWSER 窗口的大小的变化而变化?

bobo123(bobo)
本文发表在 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
(#3227317@0)
Last Updated: 2006-9-24
This post has been archived. It cannot be replied.
Report

Replies, comments and Discussions:

  • 工作学习 / 专业技术讨论 / 关于HTML问题: 如何让DIV 的高度和宽度随着IE/FIREFOX BROWSER 窗口的大小的变化而变化? -bobo123(bobo); 2006-9-24 {1941} (#3227317@0)
    本文发表在 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了一下： -holdon(again); 2006-9-25 {822} (#3229118@0)
      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";
      }
      }

More Topics

  • 看大家讨论日语，俺也正在认真学习。其实语言问题应该是很快也很容易就解决的，可能比自动驾驶来的还快。TREK里面，全宇宙的人都在大脑里安装了UNIVERSAL TRANSLATOR，外星人之间相互交流无障碍。废话少说，看视频。。。加上个MIC和耳机，不同国家的人就可以无障碍交流。
  • 肉脸真有搞 IT 的？Linux 把俄国中国伊朗踢出去了好像肉脸 IT 没啥感觉似的
  • 请问web developer和software developer技术上有什么区别？
  • Elon Musk 带着川普总统奔向火星了。
  • 扔硬币的实验研究
    • 枫下论坛主坛 /  工作学习 /  专业技术讨论