基于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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
javascript引导程序
Oct 26 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
TypeScript 中接口详解
Jun 19 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
用PHP函数解决SQL injection
2006/12/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
原生js二级联动效果
2017/06/20 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
浅谈js中的bind
2019/03/18 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
浅谈编码,解码,乱码的问题
2016/12/30 Python
python 全局变量的import机制介绍
2017/09/07 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python使用epoll实现服务端的方法
2018/10/16 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python输入多行字符串的方法总结
2019/07/02 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
求职自荐信格式
2013/12/04 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
评先进个人材料
2014/12/29 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2016入党心得体会范文
2016/01/06 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python实现单例模式的5种方法
2021/06/15 Python