基于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的设计模式经典之代理模式
Feb 24 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
JavaScript实现音乐导航效果
Nov 19 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基础知识:类与对象(5) static
2006/12/13 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
JS操作数据库的实例代码
2013/10/17 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python requests库用法实例详解
2018/08/14 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python assert关键字原理及实例解析
2019/12/13 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python 高效编程技巧分享
2020/09/10 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
校庆活动策划方案
2014/06/05 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
基于Redis位图实现用户签到功能
2021/05/08 Redis
PyTorch中的torch.cat简单介绍
2022/03/17 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
利用Python实现模拟登录知乎
2022/05/25 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android