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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
获取body标签的两种方法
Oct 13 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
jQuery事件对象总结
Oct 17 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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
优化PHP代码的53条建议
2008/03/27 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
小程序实现留言板
2018/11/02 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
vue实现购物车案例
2020/05/30 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Python列表list排列组合操作示例
2018/12/18 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python requests模块session代码实例
2020/04/14 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
业务主管岗位职责
2013/11/20 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
校友回访母校寄语
2015/02/26 职场文书
起诉书范文
2015/05/20 职场文书
2016年公司新年寄语
2015/08/17 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android