基于jquery实现控制经纬度显示地图与卫星

代码如下:

<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>

赞 (0)

相关推荐

  • SQLSERVER 根据地图经纬度计算距离差示例

    SQL SERVER 根据地图经纬度计算距离的公式 复制代码 代码如下: go --创建经纬度距离计算函数 CREATEFUNCTION [dbo].[fnGetDistance] --LatBegin 开始经度 --LngBegin 开始维度 (@LatBegin REAL, @LngBegin REAL, @LatEnd REAL, @LngEnd REAL) RETURNSFLOAT AS BEGIN --距离(千米) DECLARE @Distance REAL DECLARE @EAR

  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度

    实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换 存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +

  • 使用百度地图api实现根据地址查询经纬度

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>根据地址查询经纬度</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <script type="text/j

  • 基于jquery实现控制经纬度显示地图与卫星

    复制代码 代码如下: <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:/

  • 基于jquery的blockui插件显示弹出层

    blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息:或者用来显示一个登陆窗口,也可用来显示图片等. blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等.blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay. message:主要用来设置要显示的内容,可以直接设置为一段文字,html

  • 基于jQuery实现网页进度显示插件

    基于jQuery实现网页进度显示插件

    相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作, 以下是插件的测试截图 ,提供了两个皮肤 使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示 1.简单的调用 //所有步骤的数据 var stepListJson=[{StepNum:1,StepText:"第一步"}, {StepNum:2,StepText:"第二步"}, {StepNum:3,StepText:"第三步"}, {StepNum:

  • 基于jQuery的投票系统显示结果插件

    基于jQuery的投票系统显示结果插件

    首先还是来看一下运行效果如图1所示. 该插件使用步骤 一.引入css文件 首先页面引入css样式文件'votecss.css',他是投票结果正常显示必不可少的.具体代码如下所示: <link href="startpic/votecss.css" rel="stylesheet" type="text/css" /> 二.引入jQuery的就是源文件 该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下: <

  • 基于jquery实现的定时显示与隐藏div广告的实现代码

    下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTimeout函数来实例,下面我给大家分享我的方法.html页面中我们随便放些东西 复制代码 代码如下: <div class="toolbarframe" style="display:none;"><a href="http://www.jb51.net" target="_blan

  • poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等

    这种效果常常有两个需求 1 鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息 2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏 3 必须是自动关闭而不是手动关闭 通常第一个比较容易满足,但是第一个在遇到事件冒泡时,搞起来也比较麻烦, 这个时候在遇到第二个需求,就很难搞定了, 做微博APP时,常常要显示人的个人信息,想吧新浪或腾讯的那个js弄过来吧,搞了半天没找见是那一段js, 博客园里面推荐的一堆tooltip 均不能满足3个要求, 找了老

  • 基于JQuery的浮动DIV显示提示信息并自动隐藏

    复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击

  • 基于Jquery插件Uploadify实现实时显示进度条上传图片

    基于Jquery插件Uploadify实现实时显示进度条上传图片

    先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支持单文件或多文件上传,可控制并发上传的文件数 2).在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 3).通过参数可配置上传文件类型及大小限制 4).通过参数可配置是否选择文件后自动

  • 基于Jquery和html5的7款个性化地图插件

    基于Jquery和html5的7款个性化地图插件

    1.HTML5世界地图 划分世界区域并显示国家名 这是一款基于HTML5的世界地图应用,它的特点是可以将地图中的各个国家区域进行划分,鼠标滑过时即可显示该区域对应的国家名称,你也可以对弹出的标签进行自定义文字和自定义样式. 在线演示       源码下载 2.jQuery矢量SVG地图插件JVectorMap JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是 矢量地图,但是它同样支持地图缩放和地图平面移动等

  • 基于jquery实现页面滚动时顶部导航显示隐藏

    基于jquery实现页面滚动时顶部导航显示隐藏

    本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 <script src="js/jquery/1.11.1/jquery.min.js"></script> 构建html,margint这个div中为了出现滚动条而建,并无实际作用. <div class="top-title">这是顶部导航条</div> <di

随机推荐