复制代码 代码如下:
<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="/UploadFiles/2021-04-02/jquery-1.9.1.js"><script src="js/jquery.ui.core.js"><script src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script src="js/jquery.ui.position.js"><script src="/UploadFiles/2021-04-02/jquery.ui.tooltip.js"><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输入城市查看地图使用介绍
jQuery输入城市查看地图使用介绍
jQuery输入城市查看地图使用介绍
标签:
jQuery,城市,查看地图

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery输入城市查看地图使用介绍”

暂无“jQuery输入城市查看地图使用介绍”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。