点击按钮显示谷歌地图

原文:点击按钮显示谷歌地图

<%@ 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&amp;v=2&amp;sensor=true&amp;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>

 

时间: 2024-10-30 10:02:50

点击按钮显示谷歌地图的相关文章

JS/jQuery实现默认显示部分文字点击按钮显示全部内容_javascript技巧

复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

js jquery-JS/jQuery实现默认显示部分文字点击按钮显示全部内容

问题描述 JS/jQuery实现默认显示部分文字点击按钮显示全部内容 <!doctype html> JS实现默认显示部分文字,点击按钮显示全部 民间机构提前3天预报大理地震 地震局称违法 17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注. 记者联系上了微博博主,该博主表示,他是通过分析云南省地震局官方网站的数据得出的预报信息.对此,省地震局回应表示,地震局欢迎民间机构与地震局进行一些学术上的探讨和交流,但民间机构对外公开发布地震预

这是加入购物车代码 点击按钮显示:未实现该方法或操作。是什么意思哪位大神看一下

问题描述 这是加入购物车代码 点击按钮显示:未实现该方法或操作.是什么意思哪位大神看一下 protected void btnShop_Click(object sender, EventArgs e) { string Orderid; if (Session["UserName"] == null) { Alert.AlertAndRedirect("您还没有登录,请登录后再购买,谢谢合作!", "Default.aspx"); } else

C#点击按钮显示新窗体

问题描述 我想点击Form1中的按钮弹出Form2窗体,Form2窗体中的各种控件都没有错误,但是调试成功后点击Form1中的按钮后弹出的窗体没有任何内容,查了很多资料还是找不到问题在哪里,求各位大神指点!Form1按钮下的代码是这样的 解决方案 解决方案二:把form2.cs和form2.cs[设计]都发出来看看解决方案三:Form2.cs的构造函数里面的InitializeComponent(); 是不是让你干掉了?解决方案四:你可以重新建一个和form2一样的窗体,再用按钮打开,应该就可以

android谷歌地图 不点击myLocation按钮 直接定位到当前位置

问题描述 android谷歌地图 不点击myLocation按钮 直接定位到当前位置 安卓谷歌地图 进去时是显示世界地图 要点击mylocatonbutton才会定位到当前位置 需要怎么设置才能进去直接定位到当前位置 不需要点击myLocation按钮 解决方案 自己解决了 locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE); locationManager.requestLocationU

c#-C#网页有多个button,每个button点击之后会在地图上显示特定的点

问题描述 C#网页有多个button,每个button点击之后会在地图上显示特定的点 我想要的是每次点击只显示一个类型而现在是点击多个button后,所有点显示到一块,求大神,求解决,本人小小白! 解决方案 通过js添加覆盖物,仔细阅读下百度api的开发文档. http://developer.baidu.com/map/index.php?title=jspopular/guide/cover 解决方案二: 这个要看地图有没有提供取消当前选择点的功能?如果有,则在显示新的点之前取消之前显示的点

html-Dw cs6 要求点击按钮后在左下脚显示对应的mysql内容

问题描述 Dw cs6 要求点击按钮后在左下脚显示对应的mysql内容 如上图:点击提交按钮后就在左下角那里显示我查询出来的内容,应该在哪里写代码,在用dm cs6做的,麻烦懂的人说下 数据库连接成功了其他三个能正常显示. 部分代码 <?php echo $row_Recordset1['06.07.2015']; ?> <?php echo $row_Recordset1['18:25:08']; ?> <td><?php echo $row_Recordset

js-aspnet实现类似winform的功能,点击按钮弹出窗口,原窗口重新绑定显示查询结果

问题描述 aspnet实现类似winform的功能,点击按钮弹出窗口,原窗口重新绑定显示查询结果 想通过aspnet实现一个功能,原页面有个按钮我通过showmodaldialog弹出一个窗口,窗口里面是一个表单,我希望表单的数据传递到原页面,原页面再根据这些参数,重新绑定gridview,得出查询结果,我的原页面gridview上面还有按钮,必须放在_!ispostback_里面,所以页面用session或者get方式获得参数的话,databind必须放在_ispostback_条件里面,因为

请问在谷歌地图中google图标标签怎么显示?

问题描述 请问在谷歌地图中google图标标签怎么显示? google map默认的标示Marker,只能使用图片不能使用文字,label属性也只能显示首字符,怎么将一行文字显示在图标下边呢?请指教 解决方案 看一下官方文档上面应该有详细的介绍