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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
js动态引入的四种方法
May 05 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue移动端写的拖拽功能示例代码
Sep 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/05/27 PHP
php include类文件超时问题处理
2015/02/06 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Pygame框架实现飞机大战
2020/08/07 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
岗位职责风险防控
2014/02/18 职场文书
《假如》教学反思
2014/04/17 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
挂职个人工作总结
2015/03/05 职场文书