基于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学习资源站点
Aug 29 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 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下实现折线图效果的代码
2007/04/28 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
php获取操作系统语言代码
2013/11/04 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
js实现无缝轮播图
2020/03/09 Javascript
用python代码做configure文件
2014/07/20 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python 连接sqlite及简单操作
2017/06/30 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
医学生求职自荐信
2013/10/25 职场文书
三八活动策划方案
2014/08/17 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
呐喊读书笔记
2015/06/30 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
详解MySQL集群搭建
2021/05/26 MySQL
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android