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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
javascript 用函数实现继承详解
May 28 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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/12/21 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
js实现漫天星星效果
2017/01/19 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python实现神经网络感知器算法
2017/12/20 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
医大实习自我鉴定
2013/12/07 职场文书
给导游的表扬信
2014/01/10 职场文书
给校长的建议书600字
2014/05/15 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
家庭困难证明
2014/10/12 职场文书
查摆问题整改措施
2014/10/24 职场文书
2015年仓库工作总结
2015/04/09 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
房屋产权证明书
2015/06/19 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技