基于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 相关文章推荐
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
TypeScript中条件类型精读与实践记录
Oct 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
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python3读取zip文件信息的方法
2015/05/22 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
2014国培学习感言
2014/03/05 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
2016年党员承诺书范文
2016/03/24 职场文书