<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. Web版RSS阅读器（五）——初步完成阅读功能

    上一篇博文<Web版RSS阅读器(四)——定制自己的Rss解析库myrsslib4j>中,已经分享给大家制作自己的rss解析库.稍微有点遗憾的是,它仅仅支持rss格式的博客.现在给大家分享 ...

  2. Unity3D Android播放视频

    http://blog.csdn.net/awnuxcvbn/article/details/17719789 using UnityEngine; using System.Collections; ...

  3. Static Proxy （静态代理模式）

    1.定义一个接口 ProxyInterface.java package com.staticproxy ; public interface ProxyInterface  //就假设为 定义一个购 ...

  4. no matching function for call to 'make_pair(std::string&, size_t&)'

    rtl->push_back(make_pair<string, int>(str, pos)); 在redhat6上编译无问题,在centos7上编译出现错误: no matchi ...

  5. Spring bean三种创建方式

    spring共提供了三种实例化bean的方式:构造器实例化(全类名,反射).工厂方法(静态工厂实例化   动态工厂实例化)和FactoryBean ,下面一一详解: 1.构造器实例化 City.jav ...

  6. MySQL比较两个表不同的数据

    在本教程中,您将学习如何比较两个表以找到不匹配的记录. 在数据迁移中,我们经常需要比较两个表,以便在一个表中标识另一个表中没有相应记录的记录. 例如,我们有一个新的数据库,其架构与旧数据库不同.我们的 ...

  7. 【Android UI设计与开发】使用ViewPager实现欢迎引导页面

    一.实现的效果图 每次看别人的代码前,必需要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似.有图才有真相嘛,同一时候,最下方有源代码的下载地址,差点儿源代码的每一行都有凝视,写 ...

  8. android 实现代码混淆

    对于使用签名的apk,经常使用的反编译之后还是能查看class文件的代码实现.对于反编译可查看个人的博客点击打开链接 使用代码混淆就能是这样的常规反编译失效.很多其它混淆机制见官网http://dev ...

  9. Python 爬虫实例（6）—— 爬取蚂蚁免费代理

    数据库表sql语句: CREATE TABLE `free_ip` ( `free_ip_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键', `ip` ...

  10. mysql innodb的重要组件

    innodb包涵如下几个组件 一.innodb_buffer_pool: 1 它主要用来缓存数据与索引(准确的讲由于innodb中的表是由聚集索引组织的,所以数据只不是过主键这个索引的叶子结点). 二 ...