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

 更新时间:2013年05月08日 17:37:39   作者:  
任意输入国家和城市,用“,”分隔,点击设置下面的超链接就变为了刚设置的城市,点击可以跳到这个城市的查看地图页,鼠标移到超链接上会弹出一个350*350的地图
复制代码 代码如下:

<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&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>

使用方法:任意输入国家和城市,用“,”分隔,点击设置下面的超链接就变为了刚设置的城市,点击可以跳到这个城市的查看地图页,鼠标移到超链接上会弹出一个350*350的地图
效果图:


相关文章

  • 谈谈Jquery ajax中success和complete有哪些不同点

    谈谈Jquery ajax中success和complete有哪些不同点

    jquery ajax中success和complete有哪些不同点呢?大家都了解吗,接下来通过本篇文章给大家介绍jquery ajax中success和complete的不同点,感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery实现切换页面过渡动画效果

    jQuery实现切换页面过渡动画效果

    这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史,需要的朋友可以参考下
    2015-10-10
  • jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置

    jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的

    鼠标移动上去,元素的left增加N像素,鼠标移开会慢慢的移动到原来的位置
    2010-03-03
  • jquery实现仿新浪微博评论滚动效果

    jquery实现仿新浪微博评论滚动效果

    这篇文章主要介绍了jquery实现仿新浪微博评论滚动效果,基于jquery实现页面图文定时滚动效果,涉及jquery页面元素的遍历与样式的动态操作技巧,是一款经典的jquery滚动特效,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jquery实现吸顶导航效果

    jquery实现吸顶导航效果

    这篇文章主要为大家详细介绍了jquery实现吸顶导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    这篇文章主要介绍了jQuery+jsp下拉框联动获取本地数据的方法,以实例形式较为详细的分析了jQuery结合jsp实现下拉联动菜单读取本地数据的相关技巧,并附带了完整源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • bootstrap table 服务器端分页例子分享

    bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下
    2015-02-02
  • jQuery1.6 使用方法一

    jQuery1.6 使用方法一

    jQuery1.6 使用方法1,想要学习jquery的朋友可以参考下。
    2011-11-11
  • jQuery过滤选择器用法示例

    jQuery过滤选择器用法示例

    这篇文章主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下
    2016-09-09
  • jQuery中layer分页器的使用

    jQuery中layer分页器的使用

    本篇文章主要介绍了jQuery中layer分页器的使用,实例介绍了layer分页器的技巧,非常具有实用价值,需要的朋友可以参考下。
    2017-03-03

最新评论