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 相关文章推荐
javascript 闭包
Sep 15 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue实现简单loading进度条
Jun 06 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
机器学习python实战之手写数字识别
2017/11/01 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python 标准差计算的实现(std)
2019/07/29 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
python 写一个文件分发小程序
2020/12/05 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
How TDD works
2012/09/30 面试题
园林设计师自荐信
2013/11/18 职场文书
学校春季防火方案
2014/06/08 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
升学宴学生致辞
2015/07/27 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Apache POI的基本使用详解
2021/11/07 Servers