自定义地图鱼骨缩放控件
需积分: 15 58 浏览量
2013-09-30
10:20:22
上传
评论
收藏 40KB DOCX 举报
地图的展示都会涉及到级别的切换，百度、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).自定义鱼骨控件,已经实现了，下面分享一些心得。
资源评论
