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

代码如下:

<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()+"&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的地图
效果图：


赞 (0)

相关推荐

  • jQuery实现点击查看大图并以弹框的形式居中

    jQuery实现点击查看大图并以弹框的形式居中,实现的关键代码如下所示: *{margin:0;padding:0;} .tab_bg{display:none;width:100%;height:100%;background:#282829;z-index:99;position:absolute;} .tab_img{width:100px;height:100px;margin:20px;} .tab_img img{width:100%;height:100%;} .bigImg{di

  • jquery实现鼠标滑过小图查看大图的方法

    本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: <style type="text/css"> ul{ list-style:none; } li{ float:left; margin-left:10px; } img{ border:#CCCCCC solid 1px; } #max{ position:absolute; display:none; /*隐藏层*/ } </style>

  • jquery实现移动端点击图片查看大图特效

    jquery实现移动端点击图片查看大图特效

    本文的需求很简单:点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css&quo

  • jQuery遍历页面所有CheckBox查看是否被选中的方法

    本文实例讲述了jQuery遍历页面所有CheckBox查看是否被选中的方法.分享给大家供大家参考.具体如下: $('#tbl').find(':checkbox').each(function(){ if ($(this).is(":checked")) { //操作 } }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • 基于jQuery实现表格的查看修改删除

    基于jQuery实现表格的查看修改删除

    效果图: HTML: <table id="table"> <tr> <th>姓名</th> <th>年龄</th> <th>职位</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td&

  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    使用jQuery还可以让我们从各大浏览器不兼容的噩梦中解脱出来,最新版的jQuery还增强的对HTML5的支持,使得我们更加应该使用它.但是jQuery的源码很长,有些地方的实现还很巧妙,使得我们仅仅会javascript也未必能很好的理解每个函数是怎么运行的.下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题. 这个jquery源代码查看器,还不是很强大,只是能够简单的查看函数引用,但是不能返回. 我上这个网上下载下来了,准备改进一下,你们可以先下载来用一用,有什么意见和

  • JQuery中form验证出错信息的查看方法

    JQuery中form验证出错,可以采用以下方式来查看具体input的出错信息 复制代码 代码如下: If(!$('form').valid()) { $($('form').validate().errorList).each(function (index, item) { Console.log($($(item).attr('element)).attr('name') + ' ' + $($(item).attr('element)).attr('message')); }); }

  • 查看大图功能代码jquery版

    复制代码 代码如下: /*查看大图*/ var screenheight = $(window).height(); var screenwidth = $(window).width(); var loadCSS = function(){ var screenwidth = $(window).width(); var screenheight = $(window).height(); $("div.lookBigPicture").css({"left":s

  • 基于jQuery实现的查看全文功能【实用】

    话不多说,请看具体实例 自己引用jQuery.js版本 查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能) <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></s

  • jQuery实现简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

  • jQuery根据纬度经度查看地图处理程序

    复制代码 代码如下: <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="

  • jquery实现点击查看更多内容控制段落文字展开折叠效果

    jquery实现点击查看更多内容控制段落文字展开折叠效果

    本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能,在很多大网站都有在用,像一些电影简介.产品介绍有时候为了页面的布局效果,常常默认是隐藏了一部分,用户想看的时候可以点击后展开. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <

随机推荐