开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

点击按钮显示谷歌地图

简介: 原文:点击按钮显示谷歌地图 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
+关注继续查看
原文:点击按钮显示谷歌地图

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
网页鼠标点击特效代码
我在网页的源代码中找到了这个鼠标点击特效代码,贴在下面。
0 0
点击电脑图标,显示电脑界面。点击相同的二维码图标,显示二维码界面(七)
有时候,在一个地方,放置不同的图标,可以随时切换图标。在切换图标的时候,实际上会相应切换底下的不同的界面。
0 0
关于网站下拉导航的设置
网站的导航很多都是下拉的方式,如下图所示: 就是一种下拉菜单,导航的数据是以ul、li相互嵌套的方式存在的。 ------------------------------------------ <div class="head"> <div class="logo"></d.
770 0
解决微信底部弹出输入法遮挡页面
微信网页里面,需要输入的时候,键盘弹出,然后底部的东西会被遮挡,resize事件捕捉不到,window高度也捕捉不到? 解决: 目前这种情况只有安卓机器会发生,可以采用如下方式进行处理,在点击输入框的时候,先判断是否是安卓的机器,然后采用延时机制让页面再搞上去。
1022 0
网站广告弹出层(每天弹出一次)
演示下载地址:http://www.erdangjiade.com/php/2474.html 网站广告弹出层(每天弹出一次) 可以有两种做法 一、是标识符存入数据库 二、利用Jquery.cookie 我这里做的是比较简单的用到的知识是Jquery.cookie, 这里要注意的一点是jquery.cookie的值 火狐能够获取,IE,360,谷歌不能直接获取到值,所以测试的时候最好用FF,你只需要把代码放到服务器上其它浏览器就可以完美生效了呢。
612 0
点击按钮显示谷歌地图
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
509 0
添加按钮图标并且当点击或者悬浮上面出现不同效果的代码
在layout文件夹中写如下布局 button_demo.xml: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_pa
823 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载