<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://maps.google.cn/maps?file=api&v=2&sensor=true&key=ABQIAAAA8B5G0MGppsCNDDpwRLRu6BQrnClq8QSrQDsyF0yBh6Nxb_fPdRRy62PSpSpNN1RgvxBBuP0b63sdXA"
type="text/javascript"></script>
<style type="text/css">
.sideDiv
{
z-index: 9999;
margin-bottom: 3px;
display: none;
position: absolute;
border: solid 1px #6e8bde;
}
.mapDiv
{
clear: both;
}
.filterDiv
{
color: #C7EDCC;
background-color: inherit;
position: absolute;
top: 0px;
left: 0px;
filter: alpha(opacity=50);
}
</style>
<script type="text/javascript">
function showDiv(id) {
//加載地圖
initialize();
//在地圖後面加一個透明度層，點選這個層的時候移出地圖
$("<div id='filterDiv' style='color: #C7EDCC;background-color: inherit;position: absolute;top: 0px;left: 0px;filter: alpha(opacity=50);'></div>")
.width("100%")
.height("100%")
.click(function () { hideDiv(id); })
.appendTo("body")
.fadeIn(200);
//顯示地圖
var bgdiv = $("#" + id);
bgdiv.css({ "position": "fixed" })
.animate({ left: "30%", top: "30%", opacity: "show" }, "slow");
}
function hideDiv(id) {
//移出圖層
$("#filterDiv").remove();
$("#" + id).animate({ left: "0%", top: "0%", opacity: "hide" }, "slow");
}
function initialize() {
if (GBrowserIsCompatible()) {
//加載地圖在div中顯示
var map = new GMap2(document.getElementById("map"));
//設定中心坐标,縮放等級
map.setCenter(new GLatLng(31.21552, 121.34464), 18);
//控制器類型
map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
//加入衛星和混合地圖示簽
map.addControl(new GHierarchicalMapTypeControl());
//滑鼠滑輪控制地圖縮放
map.enableScrollWheelZoom();
//搜尋控件，便于快速定位到商家位址
map.enableGoogleBar();
}
}
</script>
</head>
<body onunload="GUnload();">
<form id="form1" runat="server">
<input type="button" id="btnTest" value="彈出地圖" onclick="showDiv('map');" /><br />
<%--<div id='div-id' style="width: 550px; height: 440px; z-index: 9999; display: none;position: absolute; border: solid 1px #6e8bde;">--%>
<div id="map" class="mapDiv" style="width: 550px; height: 440px; z-index: 9999; display: none;border: solid 1px #6e8bde;"></div>
<%--</div>--%>
</form>
</body>
</html> 作者：
Tyler Ning出處：
http://www.cnblogs.com/tylerdonet/本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過以下郵箱位址
[email protected]聯系我，非常感謝。
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)