Hey,天还没亮,夜猫子,要注意身体哦!

sprymap实现svg地图的拖动效果

   

  今天在实现svg地图拖动效果的时候直接使用js的鼠标按下、移动、弹起事件,虽然基本的地图拖动功能可以实现,但是当鼠标按下地图不同位置来拖动地图时发现地图会突然位移、位置发生跳变,拖动的体验大大降低。

  然后搜索到sprymap这个轻量级的js类库,可以实现类似百度地图的拖动效果,使用的方法也比较简单。

sprymap的官网已经进不去了,只剩下github的项目了:https://github.com/slav123/SpryMap

使用方法:

使用的时候首先引入

  1. <script src="./spryMap-2.js"></script>  

 然后在js代码中初始化即可:

  1. var map = new SpryMap({  
  2.         id : "theMap"//地图或图片的id  
  3.         width: 680,    //拖动窗口的宽  
  4.         height: 450,   //高  
  5.         startX: 200,   //初始X轴的坐标,0时为地图的左边贴边  
  6.         startY: 50,    //初始y轴的坐标,0时为地图的顶边贴边  
  7.         cssClass: "map"//地图或图片的class,可以删除  
  8.     });  

demo:http://www.risingsun.cc/demo/sprymap(测试图片使用的格式为jpg格式)

sprymap_test

未经允许不得转载:Rising Sun's Blog » JS / 前端 » sprymap实现svg地图的拖动效果
标签:
评论 0
 
 
发表评论