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¢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操作session的插件jQuerysession，并做了简单介绍，及基本语法，非常不错的一个插件，推荐给小伙伴们。2015-01-01
这篇文章主要介绍了jQuery基于Ajax实现读取XML数据功能,结合实例形式分析了jQuery基于ajax的get方式获取xml文件数据并输出显示相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了jQuery统计上传文件大小的方法,主要通过ActiveXObject对象来实现,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JavaScript揭秘：实现自动化连连看游戏的相关资料,需要的朋友可以参考下2023-11-11
获取子节点和父节点的方法有很多，在本文为大家详细介绍下jquery中时如何实现的，感兴趣的朋友可以参考下2013-09-09
做项目时需要实现CheckBox的全选，我想用JQuery实现，从网上找了找，网上的确有很多例子，但都不能实现我想要的全部效果2011-06-06
这篇文章主要为大家详细介绍了基于jquery实现简单轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了jquery实现弹出层登录和全屏层注册特效，推荐给大家，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要介绍了Jquery实现由下向上展开效果的例子,本文同时讲解了向下展开的例子,需要的朋友可以参考下2014-12-12
这篇文章主要给大家分享了js实现碰撞检测特效代码，主要就是使用JavaScript实现网页版的碰撞检测，有需要的小伙伴可以参考下2016-10-10
最新评论