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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
JavaScript confirm选择判断
Oct 18 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue组件生命周期详解
Nov 07 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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
ftp类(myftp.php)
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
微信access_token的获取开发示例
2015/04/16 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python中的pack和unpack的使用
2018/03/12 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python网络应用开发知识点浅析
2019/05/28 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
用python实现名片管理系统
2020/06/18 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
京剧自荐信
2014/01/26 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
工作推荐信范文
2014/05/10 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书