<%@ 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>