jQuery输入城市查看地图使用介绍


Posted in Javascript onMay 08, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> //在这里要注意js引入的先后顺序 
<link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> 
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="js/jquery.ui.core.js" type="text/javascript"></script> 
<script src="js/jquery.ui.widget.js" type="text/javascript"></script> 
<script src="js/jquery.ui.position.js" type="text/javascript"></script> 
<script src="js/jquery.ui.tooltip.js" type="text/javascript"></script> 
<link href="css/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¢er=" + 
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()+"&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,上海&z=11" data-geo id="AName">China,上海</a></h3> 
</div> 
</div> 
</body> 
</html>

使用方法:任意输入国家和城市,用“,”分隔,点击设置下面的超链接就变为了刚设置的城市,点击可以跳到这个城市的查看地图页,鼠标移到超链接上会弹出一个350*350的地图
效果图:
jQuery输入城市查看地图使用介绍
jQuery输入城市查看地图使用介绍
jQuery输入城市查看地图使用介绍
Javascript 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 #Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 #Javascript
jQuery cdn使用介绍
May 08 #Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 #Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 #Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 #Javascript
jquery插件validate验证的小例子
May 08 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP学习 变量使用总结
2011/03/24 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
js实现简易ATM功能
2020/10/27 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
浅谈Python type的使用
2019/11/19 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
python基础之爬虫入门
2021/05/10 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Mysql忘记密码解决方法
2022/02/12 MySQL
JavaScript获取URL参数的方法分享
2022/04/07 Javascript