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 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jquery easyui使用心得
Jul 07 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
jquery if条件语句的写法
May 19 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
原生js+canvas实现验证码
Nov 29 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批量生成缩略图的代码
2008/07/19 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python创建关联数组(字典)的方法
2015/05/04 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
安全教育心得体会
2013/12/29 职场文书
银行职员思想汇报
2013/12/31 职场文书
物理力学求职信
2014/02/18 职场文书
公司员工安全协议书
2014/11/21 职场文书
离婚答辩状范文
2015/05/22 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android