基于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 相关文章推荐
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
详解Vue打包优化之code spliting
Apr 09 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php之Memcache学习笔记
2013/06/17 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
英语专业学子个人的自我评价
2013/10/02 职场文书
超市5.1促销活动
2014/01/15 职场文书
材料会计岗位职责
2014/03/06 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
纪律教育月活动总结
2014/08/26 职场文书
2015年电教工作总结
2015/05/26 职场文书
会议简报格式范文
2015/07/20 职场文书
2015年教师节广播稿
2015/08/19 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书