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 Ajax方法传递到action(补充)
May 12 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 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 和 MySQL 基础教程(一)
2006/10/09 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
pandas分区间,算频率的实例
2019/07/04 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python代码区分大小写吗
2020/06/17 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
网站客服岗位职责
2014/04/05 职场文书
应届毕业生自荐信
2014/05/28 职场文书
2014年双拥工作总结
2014/11/21 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
整理Python中常用的conda命令操作
2021/06/15 Python