基于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 面向对象的5钟写法
Jul 31 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
老生常谈js中的MVC
Jul 25 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
原生js实现照片墙效果
Oct 13 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
smarty简单分页的实现方法
2014/10/27 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python之import机制详解
2014/07/03 Python
python文件操作整理汇总
2014/10/21 Python
Python面向对象类的继承实例详解
2018/06/27 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
矫正人员思想汇报
2014/01/08 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
房租涨价通知
2015/04/23 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
Java实现简单小画板
2022/06/10 Java/Android