<div class="codetitle"> <span><a style="CURSOR: pointer" data="69132" class="copybut" id="copybut69132" onclick="doCopy('code69132')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code69132"> <br> <br> <br><title></title> //在这里要注意js引入的先后顺序 <br><link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css"> <br><link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css"> <br><script src="js/jquery-1.9.1.js" type="text/javascript"></script> <br><script src="js/jquery.ui.core.js" type="text/javascript"></script> <br><script src="js/jquery.ui.widget.js" type="text/javascript"></script> <br><script src="js/jquery.ui.position.js" type="text/javascript"></script> <br><script src="js/jquery.ui.tooltip.js" type="text/javascript"></script> <br><link href="css/demos.css" rel="stylesheet" type="text/css"> <br><style type="text/css"> <BR>.photo { <BR>width: 300px; <BR>text-align: center; <BR>} <BR>.photo .ui-widget-header { <BR>margin: 1em 0; <BR>} <BR>.map { <BR>width: 350px; <BR>height: 350px; <BR>} <BR>.ui-tooltip { <BR>max-width: 350px; <BR>} <BR></style> <br><script type="text/javascript"> <BR>$(function () { <BR>$(document).tooltip({ <BR>items: "img, [data-geo], [title]", <BR>content: function () { <BR>var element = $(this); <BR>if (element.is("[data-geo]")) { <BR>var text = element.text(); <BR>return "<img class='map' alt='" + text + <BR>"' src='http://maps.google.com/maps/api/staticmap?" + <BR>"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" + <BR>text + "'>"; <BR>} <BR>if (element.is("[title]")) { <BR>return element.attr("title"); <BR>} <BR>if (element.is("img")) { <BR>return element.attr("alt"); <BR>} <BR>} <BR>}); <BR>$('#Button1').click(function () { <BR>$('#AName').text($('#Text1').val()); <BR>$('#AName').attr('href', "http://maps.google.com/maps?q="+$('#Text1').val()+"&z=11"); <BR>}) <BR>}); <BR></script> <br> <br> <br><div class="ui-widget photo"> <br><div class="ui-widget-header ui-corner-all"> <br><input id="Text1" type="text" value="China,上海"><input id="Button1" type="button" value="设置"> <br><h3><a href="http://maps.google.com/maps?q=China,%E4%B8%8A%E6%B5%B7&z=11" data-geo id="AName">China,上海</a></h3> <br> </div> <br> </div> <br> <br> <br> </div> <br>使用方法：任意输入国家和城市，用“，”分隔，点击设置下面的超链接就变为了刚设置的城市，点击可以跳到这个城市的查看地图页，鼠标移到超链接上会弹出一个350*350的地图 <br>效果图： <br><img src="http://files.jb51.net/file_images/article/201305/201358173240575.png?201348173354" alt="jQuery输入城市查看地图使用介绍_jquery" ><br><img src="http://files.jb51.net/file_images/article/201305/201358173406156.jpg?201348173433" alt="jQuery输入城市查看地图使用介绍_jquery" ><br><img src="http://files.jb51.net/file_images/article/201305/201358173502247.jpg?201348173525" alt="jQuery输入城市查看地图使用介绍_jquery" >
