基于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 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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
将数组写入txt文件 var_export
2009/04/21 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JavaScript 异步调用
2017/10/25 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python 将md5转为16字节的方法
2018/05/29 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
大学生团员个人总结
2015/02/14 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python