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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php单例模式示例分享
2015/02/12 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Python 必须了解的5种高级特征
2020/09/10 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
幼儿教师个人求职信范文
2013/09/21 职场文书
在校生党员自我评价
2013/09/25 职场文书
转预备党员政审材料
2014/02/06 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
孔子观后感
2015/06/08 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers