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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python笔记之代理模式
2019/11/20 Python
Pytorch中.new()的作用详解
2020/02/18 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
工商管理专业应届生求职信
2013/11/04 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
小学音乐课教学反思
2016/02/18 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers