自定义地图鱼骨缩放控件

地图的展示都会涉及到级别的切换，百度、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滑块图片 ；

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