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 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
了解JavaScript中let语句
May 30 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
JavaScript使用cookie
2007/02/02 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python3爬楼梯算法示例
2019/03/04 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
夜班门卫岗位职责
2013/12/09 职场文书
个人自我剖析材料
2014/02/07 职场文书
2014政务公开实施方案
2014/02/19 职场文书
团日活动总结书格式
2014/05/08 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android