基于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 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JS高级运动实例分析
Dec 20 Javascript
详解js的六大数据类型
Dec 27 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
小程序实现单选多选功能
Nov 04 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python字符编码判断方法分析
2016/07/01 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python实现列表的排序方法分享
2019/07/01 Python
django ajax发送post请求的两种方法
2020/01/05 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
年会活动策划方案
2014/01/23 职场文书
如何写自我鉴定
2014/03/19 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
英语读书笔记
2015/07/02 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL