基于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变量作用域更轻松
Oct 25 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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 分页原理详解
2009/08/21 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
Python解析树及树的遍历
2016/02/03 Python
python之Socket网络编程详解
2016/09/29 Python
python简单操作excle的方法
2018/09/12 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python 下划线的不同用法
2020/10/24 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
安康杯竞赛活动总结
2014/05/05 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫