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 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
总结对比php中的多种序列化
2016/08/28 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
js href的用法
2010/05/13 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
详解Python验证码识别
2016/01/25 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
超市业务员岗位职责
2013/12/05 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
医德医风自我评价
2014/09/19 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书