自定义地图鱼骨缩放控件

　　地图的展示都会涉及到级别的切换，百度、google、esri地图服务、bing等，都有自己的鱼骨控件实现地图级别的设置。

　   map和control互动的控件，原理为：

         　　　　　　　　　　

         

• 点击红框内位置，滑块切换级别定位，调用zoom，然后map跟着进行缩放
• 拖动滑块，mouseup时滑块切换级别定位（滑动效果），调用zoom，然后map跟着进行缩放
• map缩放，获取map的缩放级别level，然后对控件进行相应的修改（滑动至相应级别）

 

　　最近工作中遇到鱼骨控件的问题，做以下分析。

 

　　1. 制作鱼骨控件的方法

　　1). jquery UI的库，早期计划使用该方法，但考虑到库过大最后放弃；

　　2). html5控件range，目前使用该方法，绑定change事件实现level的切换，当然不支持拖动效果，其他还是ok的，但是ie等浏览器不支持，所以只是暂时可行；              

　　　　$("<input type=\"range\"/>")
            .css("width", "20px")
            .css("height", "200px")
            .attr("max", lods.length - 1)
            .attr("min", 0)
            .attr("step", 1)
            .attr("value", level)
            .css("-webkit-appearance", "slider-vertical")
            .bind("change", function (evt, ul) {              
            })

　　 3).从网上找第三方控件包装后，修改样式等可以使用，但是发现找不到；

　　4).自定义鱼骨控件,已经实现了，下面分享一些心得。 

  　2.自定义鱼骨控件的规则

     　　滑块沿线拖动

     　　鱼骨有刻度（间隔固定&总长度根据地图lods可变）

     　　拖动过程中无级

     　　停止时有级

 

　　3.基本思路

　　1). 红色边框定义为<div></div>，绑定mousedown事件、mouseup事件。

　　2). 滑块为<img/>元素，绑定mousedown事件。

　　3). 地图鱼控件要互动，即地图缩放时控件重新定位、控件有新位置时地图做相应缩放。

　　4). body绑定mousemove和mouseup事件，因为当事件为滑块拖动时，mousedown触发后，只要没有处于move状态没有up，无论鼠标在页面的什么位置都应该能监听到滑块的移动事件。（具体可以参考百度、谷歌地图效果）

　　5). 记录鼠标的offsetX、offsetY和pageX、pageY，来计算滑块的新位置。

 

　　4.解决方案

　　1）点击红色div，滑块定位

　　div绑定mousedown、mouseup，mousedown时记录鼠标点击处的offsetY位置和pageY1；

　　body的mouseup判断鼠标up的点pageY2与pageY1的差值，因为红色div的长度是根据lods生成的，因而判断pageY差值和滑块初始位置的关系，使用offsetY判断最适级别，就可以区分三种状态：滑块在最大级别、最小级别、中间某级别，分别根据滑块的absolute定位的top属性来定义位置。

　　2）滑块拖动后定位

　　滑块绑定mousedown事件，记录当前滑块位置和pageY1

　　body的mousemove是事件，根据当前鼠标点pageY2和pageY1差值，根据此差值和最初滑块位置区分三种状态，并绝对定位滑块位置。

 

 

ps:

　   div相对定位&滑块绝对定位；

　　div的宽度为23px；以小图片根据lods填充，图片是一个对称图形，保证填充时鱼骨连续； 

　　img滑块图片 ；

　　此处只介绍思路，就不附代码了，有不详尽的可以再作讨论！