基于jquery实现控制经纬度显示地图与卫星


Posted in Javascript onMay 20, 2013
<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="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="js/jquery.mousewheel.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.button.js" type="text/javascript"></script> 
<script src="js/jquery.ui.spinner.js" type="text/javascript"></script> 
<link href="css/demos.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(function () { 
function latlong() { 
return new google.maps.LatLng($("#lat").val(), $("#lng").val()); 
} 
function position() { 
map.setCenter(latlong()); 
} 
$("#lat, #lng").spinner({ 
step: .001, 
change: position, 
stop: position 
}); 
var map = new google.maps.Map($("#map")[0], { 
zoom: 8, 
center: latlong(), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
}); 
</script> 
<style type="text/css"> 
#map { 
width:500px; 
height:500px; 
} 
</style> 
</head> 
<body> 
<label for="lat">纬度</label> 
<input id="lat" name="lat" value="44.797"/> 
<br> 
<label for="lng">经度</label> 
<input id="lng" name="lng" value="-93.278"/> 
<div id="map"></div> 
<div class="demo-description"> 
</div>
Javascript 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 #Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 #Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 #Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 #Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 #Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 #Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 #Javascript
You might like
ajax+php控制所有后台函数调用
2015/07/15 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JavaScript 原型继承
2011/12/26 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python中的getopt函数使用详解
2015/07/28 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python中反射和描述器总结
2018/09/23 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
捐款倡议书范文
2014/02/02 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
私人委托书格式
2014/09/10 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
授权委托书
2015/01/28 职场文书
财政局长个人总结
2015/03/04 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python