<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缺少程序集引用怎么办

    如下所示,提示缺少Windows的引用,在using System.Windows.Forms;有一个下划线 错误代码为: 错误    1    命名空间"System"中不存在类 ...

  2. GuildBrowser使用AF+MVC 学习笔记

    GuildBrowser 是一个 测试用的项目此为 魔兽世界api的一个展示客户端 项目地址:https://github.com/yehai/GuildBrowser 一:所使用的设计模式:MVC ...

  3. UVA1614(贪心）

    Hell on the Markets Time Limit:3000MS   Memory Limit:Unknown   64bit IO Format:%lld & %llu [Subm ...

  4. 【Linux】od命令

    用途 od命令主要用于查看非文本文件,通过指定该命令的不同选项可以以十进制.八进制.十六进制和ASCII码来显示 全称 od的全称为:Octal Dump 参数 -t :后面接各种类型的显示方式 a ...

  5. SuperMap iManager跨网段配置许可

    作者:非法小恋 1.开启Docker容器1947映射 修改docker-compose.yml,在iManager的ports添加- "1947:1947" 2.重启iManage ...

  6. 多对一关系表 java类描述

    少的一方把它查询出来,多的一方看需求把它查出来 涉及java对象涉及到多个对象相互引用,要尽量避免使用一对多,或多对多关系,而应使用多对一描述对象之间的关系(或使用延迟加载的方式). 下个例子empl ...

  7. HTML5学习笔记 音频

    HTML5提供了播放音频的标准. Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...

  8. Linux-软件包管理-yum在线管理-网络yum源

    cd /etc/yum.repos.d/  切换到etc目录下面的yum.repos.d这个目录中ls   查看当前linux系统的yum源文件信息,其中CentOS-Base.repo文件为默认的y ...

  9. Linux命令格式

  10. python 中 numpy array 中的维度

    简介 numpy 创建的数组都有一个shape属性,它是一个元组,返回各个维度的维数.有时候我们可能需要知道某一维的特定维数. 二维情况 >>> import numpy as np ...