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 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
详解在React-Native中持久化redux数据
May 22 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
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
JS回调函数深入理解
2019/10/16 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
javascript实现滚轮轮播图片
2020/12/13 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python进行参数传递的方法
2020/05/12 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
产品促销活动策划书
2014/01/15 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
分享几个实用的CSS代码块
2022/06/10 HTML / CSS