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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
javascript编程起步(第一课)
Jan 10 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 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 数组遍历顺序理解
2009/09/09 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Python中super关键字用法实例分析
2015/05/28 Python
python实现人脸识别代码
2017/11/08 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
前台岗位职责
2015/02/13 职场文书
单位工作证明范本
2015/06/15 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书