JavaScript地图拖动功能SpryMap的简单实现


Posted in Javascript onJuly 17, 2013

使用它你可以轻松实现类似Google、百度地图的拖动效果,对于要展示大图时使用SpryMap是再好不过的了。SpryMap的定制性也很高,通过参数可以设置图片的起始位置、CSS样式等等。除此之外,你也可以设置是否使用平滑的拖动效果。
    如何使用

首先在head中加载SpryMap的脚本文件

<script type="text/javascript" src="spryMap-min2.js"></script>

在页面中添加要显示的图片,如设置id为worldMap的img标签

<img id="worldMap" src="map.jpg"/>

最后在页面加载时初始化

var map = new SpryMap({id : "worldMap",
                             height: 400,
                             width: 800,
                             startX: 200,
                             startY: 200,
                             cssClass: "mappy"});
Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
jquery获取radio值实例
Oct 16 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
Node.Js中实现端口重用原理详解
May 03 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
js导出格式化的excel 实例方法
Jul 17 #Javascript
js检查页面上有无重复id的实现代码
Jul 17 #Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 #Javascript
jcrop基本参数一览
Jul 16 #Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 #Javascript
jquery特效 幻灯片效果示例代码
Jul 16 #Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 #Javascript
You might like
php unicode编码和字符串互转的方法
2020/08/12 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
win与linux系统中python requests 安装
2016/12/04 Python
python读取中文txt文本的方法
2018/04/12 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
国际贸易专业自荐信
2014/06/10 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
员工辞职信范文
2015/03/02 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
合作合同协议书
2016/03/21 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
python中filter,map,reduce的作用
2022/06/10 Python