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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
Jquery cookie操作代码
Mar 14 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Angular短信模板校验代码
Sep 23 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
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使用正则表达式获取图片url的方法
2015/01/16 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Node.js log4js日志管理详解
2018/07/31 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python开发一款翻译工具
2020/10/10 Python
Python对excel的基本操作方法
2021/02/18 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
大一自我鉴定范文
2013/10/04 职场文书
工程力学专业毕业生求职信
2013/10/06 职场文书
大一学生假期实习的自我评价
2013/10/12 职场文书
高中生逃课检讨书
2014/10/10 职场文书
大班下学期个人总结
2015/02/13 职场文书
世界气象日活动总结
2015/02/27 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Android 中的类文件和类加载器详情
2022/06/05 Java/Android