基于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 动态添加表格行
Jun 22 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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
AM/FM收音机的安装与调试
2021/03/02 无线电
聊天室php&amp;mysql(五)
2006/10/09 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
js实现动态时钟
2020/03/12 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
踏青活动策划方案
2014/08/19 职场文书
党员发展大会主持词
2015/07/03 职场文书
大学生社会实践感想
2015/08/11 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Windows server 2012搭建FTP服务器
2022/04/29 Servers
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL