jQuery根据纬度经度查看地图处理程序


Posted in Javascript onMay 08, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
//在这里要注意js的引入顺序 
<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> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 #Javascript
JavaScript 创建运动框架的实现代码
May 08 #Javascript
jQuery输入城市查看地图使用介绍
May 08 #Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 #Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 #Javascript
jQuery cdn使用介绍
May 08 #Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 #Javascript
You might like
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php单一接口的实现方法
2015/06/20 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
JavaScript中的类继承
2010/11/25 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
linux下安装easy_install的方法
2013/02/10 Python
快速入手Python字符编码
2016/08/03 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Python 合并拼接字符串的方法
2020/07/28 Python
美国手机支架公司:PopSockets
2019/11/27 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
数组越界问题
2015/10/21 面试题
政府个人对照检查材料
2014/08/28 职场文书
个人工作表现评价材料
2014/09/21 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS