<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. ASP.NET HTTP404错误怎么办

    如图所示,HTTP404错误. 这是由于没有安装ASP.NET导致的.我们在控制面板->打开或关闭windows功能->Internet信息服务->万维网服务->应用程序开发功 ...

  2. Python dict的特点

    dict的特点 1:查找速度快 2:浪费空间 3:key不可以重复,且不可变 4:数据无序排放 dict的第一个特点是查找速度快,无论dict有10个元素还是10万个元素,查找速度都一样.而list的 ...

  3. Oracle url编码与解码

      Oracle url编码与解码 CreateTime--2018年3月30日17:26:36 Author:Marydon 一.url编码 实现方式:utl_url.escape() 说明:utl ...

  4. android TextView异常换行层次不齐的问题

    关于TextView异常换行,参差不齐问题分析:每行的开头的第一个字符如果是字母,数字,标点符号以及特殊字符 可能是由于都是半角字符,所以需要转化成全角字符 解决方法是: public String ...

  5. html <br/>引起的”血案“

    图片一: 图片二: 图片三: 图片四:

  6. UML基础——统一建模语言简介

    到了21世纪——准确地说是2003年,UML已经获得了业界的认同.在我所见过的专业人员的简历中,75%都声称具备UML的知识.然而,在同绝大多数求职人员面谈之后,可以明显地看出他们并不真正了解UML. ...

  7. C#拼接SQL中in条件

    一.拼接字符串类型的字段 string sql = @"select distinct ziduan from tablename where ziduan in ('{0}')" ...

  8. ajax表单提交较慢原因的解决办法

    ajax提交表单时,发现过了好长时间才有反应.使用F12打开开发人员工具一看,发现提示“provisional headers are shown”. 百度了一下,才知道可能是ajax异步提交和for ...

  9. android Handler的使用(一)

    Handler的使用(一) Handler基本概念: Handler主要用于异步消息的处理:当发出一个消息之后,首先进入一个消息队列,发送消息的函数即刻返回,而另外一个部分逐个的在消息队列中将消息取出 ...

  10. Json序列化之.NET开源类库Newtonsoft.Json

    上代码: using System; using System.Collections; using System.Collections.Generic; using System.IO; usin ...