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改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
使用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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
业务经理岗位职责
2013/11/11 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
高中语文教学反思
2014/01/16 职场文书
师德师风建设方案
2014/05/08 职场文书
公安学专业求职信
2014/07/27 职场文书
2014年卫生工作总结
2014/11/27 职场文书
调解书格式范本
2015/05/20 职场文书
酒桌上的开场白
2015/06/01 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python