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 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Python修改DBF文件指定列
2020/12/19 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
安全资金保障制度
2014/01/23 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
政府法律服务方案
2014/06/14 职场文书
十佳家长事迹材料
2014/08/26 职场文书
中学生思想品德评语
2014/12/31 职场文书
道歉信范文
2015/05/12 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
MySQL插入数据与查询数据
2022/03/25 MySQL