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函数ajax
Aug 20 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
loading动画特效小结
Jan 22 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP版自动生成文章摘要
2008/07/23 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
秦兵马俑教学反思
2014/02/07 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
创业计划书之便利店
2019/09/05 职场文书
python - asyncio异步编程
2021/04/06 Python
总结几个非常实用的Python库
2021/06/26 Python
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技