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 随机展示头像实现代码
Dec 06 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
vuex实现购物车的增加减少移除
Jun 28 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 5.0 Pear安装方法
2006/12/06 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php 删除cookie方法详解
2014/12/01 PHP
jquery 上下滚动广告
2009/06/17 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
Python实现Restful API的例子
2019/08/31 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
进步之星获奖感言
2014/02/22 职场文书
安全生产活动月方案
2014/03/09 职场文书
货车司机岗位职责
2014/03/18 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
简历中自我评价范文
2015/03/11 职场文书
英文产品推荐信
2015/03/27 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
信息技术课教学反思
2016/02/23 职场文书
python中sys模块的介绍与实例
2021/04/17 Python