使用asp.net调用谷歌地图api示例
2014-08-22 11:25
726 查看
asp.net调用谷歌地图api,需要注意js引入的先后顺序,复制一下代码即可测试
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>//在这里要注意js引入的先后顺序 <link href="Mapjs/jquery.ui.base.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <link href="Mapjs/jquery.ui.theme.css" rel="external nofollow" 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="external nofollow" 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¢er=" + 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()+"&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,上海&z=11" rel="external nofollow" data-geo id="AName">China,上海</a></h3> </div> </div> </body> </html>
大家可以点击复制测试一下
您可能感兴趣的文章:
相关文章推荐
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(1):调用Web Service、调用页面中的类方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(2):处理异步调用中的异常
- 如何使用来自 ASP.NET 的客户端证书调用 Web 服务
- 从 ASP.NET 应用程序调用 Microsoft Visual Basic 6.0 DLL 时,使用 Microsoft Visual Studio .NET 本机调试器调试它
- asp.net ajax1.0 使用js调用webSerivce
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 使用ASP.NET AJAX调用后台WebService优化网站性能实例
- Microsoft ASP.NET AJAX 使用客户端调用服务器端的方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- ASP.NET中使用C#调用服务器端exe可执行文件
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(0):目录
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(6):服务器端和客户端数据类型的自动转换:复杂类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(8):服务器端和客户端数据类型的自动转换:数组类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(5):服务器端和客户端数据类型的自动转换:基本类型和枚举类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(3):保持用户上下文
- 在Asp.net中调用异步方法--使用信号量
- 第三部分 01 使用ASP.NET AJAX异步调用WebService(全)
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(7):服务器端和客户端数据类型的自动转换:泛型集合类型