基于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系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 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解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP中的替代语法介绍
2015/01/09 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
img的onload的另类用法
2008/01/10 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python常见的pandas用法demo示例
2019/03/16 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python中adb有什么功能
2020/06/07 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
python3处理word文档实例分析
2020/12/01 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
租车协议书范本
2014/04/22 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
改进工作作风心得体会
2016/01/23 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
mysql自增长id用完了该怎么办
2022/02/12 MySQL
python_tkinter事件类型详情
2022/03/20 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫