<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. windows下基于apache的SVN启动失败修改

    我用的svn版本是:Setup-Subversion-1.8.1-1.msi, Apache版本是httpd-2.2.25-win32-x86-no_ssl.msi,安装完后把SVN bin文件夹下的 ...

  2. UNIX网络编程读书笔记：套接口地址结构

    前言 大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以"sockaddr_"开头,并以对应每个协议族的唯一后缀 ...

  3. centos6.5下使用yum完美搭建LNMP环境(php5.6，mysql5.5，nginx1.10)

    准备工作 配置防火墙,开启80端口.3306端口 不用执行这句:rm -rf /etc/sysconfig/iptables 直接进入修改:vi /etc/sysconfig/iptables 添加8 ...

  4. python笔记-print输出

    print语句默认是输出一行后添加一个换行符 >>> for item in ['apple','ibm','google','oracle']: ... print item .. ...

  5. Java程序（非web）slf4j整合Log4j2

    一.依赖包准备 //slf4j项目提供 compile group: 'org.slf4j', name: 'slf4j-api', version: '1.7.25' //log4j2项目提供 co ...

  6. django abstract base class ---- 抽象基类

    抽象蕨类用于定义一些同享的列.类本身并不会在数据库端有表与之对应 一.例子: 1.定义一个叫Person 的抽象基类.Student 继承自Person from django.db import m ...

  7. 2015 HDU 多校联赛 5317 RGCDQ 筛法求解

    2015 HDU 多校联赛 5317 RGCDQ 筛法求解 题目  http://acm.hdu.edu.cn/showproblem.php? pid=5317 本题的数据量非常大,測试样例多.数据 ...

  8. redis基础之基本键值操作和使用（三）

    前言 redis安装完毕后开始使用redis,先熟悉命令行操作. redis数据的类型 键:redis的所有的键都是string类型: 值:五种类型 string:字符串类型:一个string最大可以 ...

  9. Ubuntu/Debian交叉编译安装ARM平台版本的ffmpeg

    1 准备工作 (1)libmp3lame库 下载:    wget http://downloads.sourceforge.net/lame/lame-3.99.tar.gz 解压 编译:./con ...

  10. poj2082单调栈

    本来实在做后缀数组的题目的,不巧,碰到了pku3415这题,需要用到单调栈来维护,但是之前又没有学习过单调栈这方面的知识,于是水了几题....... 题意:给你一些连续的小矩形,高宽不定,求最大的矩形 ...