<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调用谷歌地图api的更多相关文章

  1. js基于谷歌地图API绘制可编辑圆形与多边形

    之前的工作中需要在谷歌地图上绘制可编辑多边形区域,所以基于谷歌地图API封装了个html页面,通过调用js绘制多边形并返回各点的经纬度坐标:当然首先你要保证你的电脑可以打开谷歌地图... 新建一个ht ...

  2. 谷歌地图 API 开发之添加标记（解析以及补充）

    今天又看了下官网,发现官网上有地图标记的详细说明.当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^o^)/~地址:https://developers.google ...

  3. C#调用百度地图 api

    转  http://blog.csdn.net/kkkkkxiaofei/article/details/8663377 这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不 ...

  4. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  5. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  6. C#调用百度地图API经验分享（四）

    这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...

  7. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  8. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  9. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

随机推荐

  1. 设计模式之Programming to an Interface, not anImplementation 程序指向接口，而不是实现

    Class inheritance is basically just a mechanism for extending an application's functionality by reus ...

  2. 【转】使用python编写网络通信程序

    文章主体现部分来自:http://openexperience.iteye.com/blog/145701 1. 背景知识 如果使用TCP协议来传递数据,客户端和服务器端需要分别经过以下步骤: ser ...

  3. 算法笔记_156:算法提高 6-17复数四则运算(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 设计复数库,实现基本的复数加减乘除运算. 输入时只需分别键入实部和虚部,以空格分割,两个复数之间用运算符分隔:输出时按a+bi的格式在屏幕上打印结果 ...

  4. Decorator [ˈdekəreɪtə(r)] 修饰器/装饰器 -- 装饰模式

    装饰模式 -- 原先没有,后期添加的属性和方法 修饰器(Decorator)是一个函数,用来修饰类的行为.这是ES7的一个提案,目前Babel转码器已经支持. 需要先安装一个插件: npm insta ...

  5. linux sheel重复执行上条命令

    Linux系统下Shell重复执行上条命令的 4 种方法: 1.使用上方向键,并回车执行. 2.按 !! 并回车执行. 3.输入 !-1 并回车执行. 4.按 Ctrl+P 并回车执行.

  6. PHP开发学习门户第三版UI正式上线

    官网:http://www.phpthinking.com/ 论坛:http://bbs.phpthinking.com/ 迭代.迭代,似魔鬼的步伐.似魔鬼的步伐-- PHP开发学习门户第二版UI用了 ...

  7. eclipse maven Cannot change version of project facet Dynamic web module to 3.0

      eclipse maven Cannot change version of project facet Dynamic web module to 3.0 (eclipse 修改maven项目的 ...

  8. Maven + Apache Felix + CXF + DOSGi series

    This is a blog series on how to combine Maven + Apache Felix + CXF + DOSGi. The information presente ...

  9. hibernate中一些属性对操作的影响

    1 inverse,在一对多中使用,表示是否有关联关系控制权.对于保存.删除数据有影响. 2 cascade,表示级联操作 save-update 表示级联保存和更新 delete 表示级联删除 al ...

  10. 会话过程保存数据对象cookie和session

    1 cookie是以键值对保存在浏览器端,服务器端可以创建.接收.发送 cookie 信息. request可以接收 cookie, response 可以发送 cookie. 1)cookie 可以 ...