大佬教程收集整理的这篇文章主要介绍了css – 根据浏览器调整大小调整谷歌地图的大小,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
加载页面时的初始状态
当我调整浏览器大小时,地图的大小仍然是初始状态.
[码]
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script src="http://code.jquery.com/jquery-1.7.2.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type='text/javascript'> var point; var mrktx; function mshow() { $("#search_content").css("display",""); } function mhide() { $("#search_content").css("display","none"); } function load() { if(navigator.geoLOCATIOn) { navigator.geoLOCATIOn.getCurrentPosition(ShowPosition) } else { alert("Browser does not support"); setTimeout( function(){ window.LOCATIOn = "../" },500); } function ShowPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var cwidth = document.getElementsByTagName("body")[0].clientWidth; var cheight = document.getElementsByTagName("body")[0].clientHeight; //alert(cwidth + ',' + cheight); $("#body").css("overflow","hidden"); $("#map_canvas").css("position","absolute"); $("#map_canvas").css("overflow","auto"); $("#map_canvas").css("height",cheight); $("#map_canvas").css("width",cwidth); $("#map_canvas").css("z-index","99") $("#map_canvas").css("top","0"); $("#map_canvas").css("left","0em"); $("#top_nav").css("width",cwidth); $("#top_nav").css("height","8%"); var latlng = new google.maps.LatLng(lat,lng); var myOptions = { zoom: 11,center: latlng,mapTypEID: google.maps.MapTypEID.roaDMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); $('document').resize(function(){ google.maps.event.trigger(map,'resize'); map.setZoom( map.getZoom() ); }); var mymrkrTxt = ""; var infowindow = new google.maps.InfoWindow({ content : mymrkrTxt }); var mymrkr = new google.maps.Marker({position:latlng,map:map}); google.maps.event.addListener(mymrkr,'mouseover',function(){ infowindow.open(map,mymrkrTxt); }); google.maps.event.trigger(map,"resize"); } } </script> <style> #top_nav { position: absolute; z-index: 200; top: 0px; BACkground-color: black; } #top_nav h2 { color: white; } body,html { height: 100%; width: 100%; } </style> </head> <body onload='load()'> <div id="map_canvas"></div> </body> </html>
所以只需将其添加到您的调整大小()
//its maybe better to attach this handler to the window instead of the document $(window).resize(function(){ $('#map_canvas').css("height",$(window).height()); $('#map_canvas').css("width",$(window).width()); google.maps.event.trigger(map,'resize'); map.setZoom( map.getZoom() ); });
所以你跟踪你的浏览器窗口的大小调整:)
以上是大佬教程为你收集整理的css – 根据浏览器调整大小调整谷歌地图的大小全部内容,希望文章能够帮你解决css – 根据浏览器调整大小调整谷歌地图的大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。