`

asp.net谷歌地图api调用

 
阅读更多
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>//在这里要注意js引入的先后顺序
    <link href="Mapjs/jquery.ui.base.css" rel="stylesheet" type="text/css" />
    <link href="Mapjs/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.9.1.js" type="text/javascript"></script>

    <script src="Mapjs/jquery.ui.core.js" type="text/javascript"></script>

    <script src="Mapjs/jquery.ui.widget.js" type="text/javascript"></script>

    <script src="Mapjs/jquery.ui.position.js" type="text/javascript"></script>

    <script src="Mapjs/jquery.ui.tooltip.js" type="text/javascript"></script>

    <link href="Mapjs/demos.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .photo
        {
            width: 300px;
            text-align: center;
        }
        .photo .ui-widget-header
        {
            margin: 1em 0;
        }
        .map
        {
            width: 350px;
            height: 350px;
        }
        .ui-tooltip
        {
            max-width: 350px;
        }
    </style>

    <script type="text/javascript">
   $(function () {
       $(document).tooltip({
           items: "img, [data-geo], [title]",
           content: function () {
               var element = $(this);
               if (element.is("[data-geo]")) {
                   var text = element.text();
                   return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
text + "'>";
               }
               if (element.is("[title]")) {
                   return element.attr("title");
               }
               if (element.is("img")) {
                   return element.attr("alt");
               }
           }
       });


       $('#Button1').click(function () {
           $('#AName').text($('#Text1').val());
           $('#AName').attr('href', "http://maps.google.com/maps?q="+$('#Text1').val()+"&amp;z=11");
              
       })
       
   });
    </script>

</head>
<body>
    <div class="ui-widget photo">
        <div class="ui-widget-header ui-corner-all">
            <input id="Text1" type="text" value="China,上海" /><input id="Button1" type="button"
                value="设置" />
            <h3>
                <a href="http://maps.google.com/maps?q=China,上海&amp;z=11" data-geo id="AName">China,上海</a></h3>
        </div>
    </div>
</body>
</html>
分享到:
评论

相关推荐

    ASP.NET调用V3版本的Google Maps API.pdf

    任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。 Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。...

    使用asp.net调用谷歌地图api示例

    主要介绍了asp.net调用谷歌地图api的过程,需要注意js引入的先后顺序,需要的朋友可以参考下

    ASP.NET页面中使用Google Map

    但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...

    在ASP.NET中使用Google Map

    但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...

    asp.net知识库

    深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...

    Google Maps Control for ASP.Net 2.0

    Google Maps Control for ASP.Net 是使用asp.net2.0 来实现 Google Maps的api 调用实现地图操作

    在ASP.NET中使用Google Maps

    但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...

    ASP.NET3.5典型模块开发源代码

    15.2.2 如何在ASP.NET 3.5中调用Alexa的数据 170 15.3 自定义统计模块 171 15.3.1 设计保存IP数据的数据库 171 15.3.2 设计显示IP信息的界面 173 15.3.3 显示最近访问站点的10个IP信息 174 15.3.4 实现IP...

    asp.net中javascript与后台c#交互

    由于是在asp.net中实现,故问题演化成asp.net中javascript与后台c#如何进行交互。 C#代码与javaScript函数的相互调用主要有四个方面: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量?

    PageOffice for ASP.NET v4.0 免费试用版

    PageOffice是市场上唯一一款能够同时支持IE、谷歌Chrome、火狐Firefox、搜狗、360等所有流行浏览器的在线Office组件/文档控件。磐石般的运行稳定性,复杂客户机环境下的广泛兼容性,客户端傻瓜式安装,惬意的用户...

    ASP.NET Core 3.0使用gRPC的具体方法

    gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架。 gRPC使客户端和服务端应用程序可以透明地进行通信,并简化了连接系统的构建。它使用HTTP/2作为通信协议,使用 Protocol Buffers 作为序列...

    Chart 极品web报表控件收集(Flot,AmCharts, Emprise JavaScript Charts...)

    • Visifire - Visifire 是用 Silverlight 做的,是一个开源可视化数据组件,使用Visifire你能创建动画 Silverlight 图表,支持 ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails 或者 简单 HTML调用. ...

    淘东东免费淘宝客程序 v2.2

    1.新增了远程时实调用模式,效果与传统的淘客API类似,但是无需申请API,直接即可使用,较API来说可以避免API不稳定及调用频率限制等问题 2.调用条件可在商品分类中设置,将允许为每个大分类以及其子分类设置不同的调用...

    相册 多图片上传

    这个我是用ASP.NET建的项目,如果你是其他平台的也可以参考里面某些代码,如Uploadify上传,Jquery对图片列表的操作。 其他的具体看项目,代码片段: PicUpload.js : //删除图片 function deletePic(n) { $.ajax({...

    开发PHP扩展详细教程

    前端时间因为客户的原因折腾了一下asp的扩展,在ATL的帮助下写一个asp的模块还是很容易的。不巧的时刚刚折腾完asp的COM就碰到另一个客户的问题。客户想给系统集成ICBC的接口,但是用ICBC的接口需要用他们的提供的...

    JAVA上百实例源码以及开源项目源代码

     各种EJB之间的调用源码示例,用远程接口的引用访问EJB、函数将被FirstEJB调用,同时它将调用secondEJB 基于JAVA的UDP服务器模型源代码 2个目标文件 摘要:Java源码,网络相关,UDP  基于JAVA的UDP服务器模型源代码...

    JAVA上百实例源码以及开源项目

     各种EJB之间的调用源码示例,用远程接口的引用访问EJB、函数将被FirstEJB调用,同时它将调用secondEJB 基于JAVA的UDP服务器模型源代码 2个目标文件 摘要:Java源码,网络相关,UDP  基于JAVA的UDP服务器模型源代码...

Global site tag (gtag.js) - Google Analytics