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 tools 系列 scrollable(2)
Sep 06 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
python中的多重继承实例讲解
2014/09/28 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
django 将model转换为字典的方法示例
2018/10/16 Python
django+mysql的使用示例
2018/11/23 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
利用python实现AR教程
2019/11/20 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
项目采购员岗位职责
2014/04/15 职场文书
网络营销策划方案
2014/06/04 职场文书
竞赛口号大全
2014/06/16 职场文书
2015个人半年总结范文
2015/03/09 职场文书
政府会议通知范文
2015/04/15 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
Python 数据可视化之Seaborn详解
2021/11/02 Python