基于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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
AngularJS手动表单验证
Feb 01 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
微信支付开发订单查询实例
2016/07/12 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
python实现图片批量剪切示例
2014/03/25 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python中logging库的使用总结
2017/10/18 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
基于python绘制科赫雪花
2018/06/22 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
市政管理求职信范文
2014/05/07 职场文书
中学生自我评价2015
2015/03/03 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python