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

复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML ' head title/title//在这里要注意射流研究…引入的先后顺序link href=' CSS/jquery。ui。基地。CSS ' rel='样式表'类型=' text/CSS '/link href=' CSS/jquery。ui。主题。CSS ' rel='样式表'类型=' text/CSS '/脚本src=' http : js/jquery-1。9 .1 .js '类型=' text/JavaScript '/脚本src=' http 3360 js/jquery。ui。核心。js '照片{宽度： 300像素文本对齐：中心；} .照片ui-widget-header { margin : 1em 0；} .地图{宽度： 350像素高度： 350像素；} .ui-tooltip { max-width : 350 px；}/style script type=' text/JavaScript ' $(function(){ $(document)).tooltip({ items: 'img，[data-geo]，[title]'，content : function(){ var element=$(this)；if(元素。is('[data-geo]'){ var text=element。text()；返回' img class=' map ' alt=' text ' ' src=' http://map。谷歌。' com/maps/API/静态地图'zoom=11 size=350 x350 AP type=terrainsenser=false center=' text '；} if(元素。是('[title]'){ return元素。attr(' title ')；} if(元素。是(' img '){ return元素。attr(' alt ')；} } });$('#Button1 ').单击(function () { $('#AName ')).文本($('#Text1 ').val())；$('#AName ').'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 '输入id='Text1 '类型='文本'值='中国，上海/input id=' button 1 '类型=' button '值='设置/h3a href=' http://地图。谷歌。com/maps？q=中国，上海z=11' data-geo id='AName'China，上海/a/h3 /div /div /body /html使用方法：任意输入国家和城市，用","分隔，点击设置下面的超链接就变为了刚设置的城市，点击可以跳到这个城市的查看地图页，鼠标移到超链接上会弹出一个350*350的地图效果图