为什么写？
问题起因:开发一个利用MUI开发的移动端的APP，APP中使用了百度地图。在使用了百度地图开发过程中，我想实现自定义控件，如下图所示：百度地图APP中的竖着的，靠右边或者下边的控件一样。
折腾了几天的空余时间，终于搞出来了，最终结果对比图：
百度地图APP的：
我实现的：
丑是丑了点（毕竟没专业学过前端），但是总归是实现了（自夸一下，我还是很厉害的，hhhh）
可愁死个人，翻遍了百度都找不到一篇比较适合新手的文章。真是很符合一句话：自己动手，丰衣足食。那就自己来吧！
喜欢百度的原因是因为DOME文档给的挺好，复制下来，然后阅读下代码基本上就可以拿到项目中来了。
地址：http://lbsyun.baidu.com/jsdemo.htm#b0_6
找到如上图所示的地图控件示例
大家可以自己试试：我个人觉得这种方法做简单的还可以，如果是复杂点的程序，就不太好了。建议自己把这个小dome跑一下，学任何语言毕竟都是从hello开始的嘛！
如果不想去百度官网复制下来，就用下面的吧：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>添加自定义控件</title> </head> <body> <div id="allmap"></div> <p>在地图左上角添加"放大2级"自定义控件，双击放大地图2级</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 定义一个控件类,即function function ZoomControl(){ // 默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); } // 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回 // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中 ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素 var div = document.createElement("div"); // 添加文字说明 div.appendChild(document.createTextNode("放大2级")); // 设置样式 div.style.cursor = "pointer"; div.style.border = "1px solid gray"; div.style.backgroundColor = "white"; // 绑定事件,点击一次放大两级 div.onclick = function(e){ map.setZoom(map.getZoom() + 2); } // 添加DOM元素到地图中 map.getContainer().appendChild(div); // 将DOM元素返回 return div; } // 创建控件 var myZoomCtrl = new ZoomControl(); // 添加到地图当中 map.addControl(myZoomCtrl); </script>
还可以添加比例尺
可以添加图层切换
代码请到官网自取
但是都不能满足我这颗幼小的心灵
费劲心思的筹划了这一切，但是似乎想到了一个更好的办法，如下：
- 那就是我可以直接创建一个div呀，让div直接浮在百度地图的map上，不就好了吗？
二话不说就干了
代码如下：
<!-- 悬浮的div工具栏 --> <div id="up-map-div" style="color: #000000;"> <div class="mui-input-row" style="text-align: center;" > <a href="javascript:void(0)" class="mui-tab-item " > <span class="iconfont icon-tuceng"></span> <br /> <span class="caidanYanse">图层</span> </a> </div> <hr style="height:1px;border:none;border-top:1px solid #555555;" /> <div class="mui-input-row" style="text-align: center;"> <a href="javascript:void(0)" class="mui-tab-item " id="jingdian"> <span class="iconfont icon-jingdian" class="caidanYanse"></span> <br /> <span class="caidanYanse">景点</span> </a> </div> <hr style="height:1px;border:none;border-top:1px solid #555555;" /> <div class="mui-input-row" style="text-align: center;"> <a href="javascript:void(0)" class="mui-tab-item " id="baoxiu"> <span class="iconfont icon-wj-bxd" class="caidanYanse"></span> <br/> <span class="caidanYanse">报修</span> </a> </div> <hr style="height:1px;border:none;border-top:1px solid #555555;" /> <div class="mui-input-row" style="text-align: center;"> <a href="javascript:void(0)" class="mui-tab-item " id="biaobai"> <span class="iconfont icon-biaobaiqiang" class="caidanYanse"span> <br/> <span class="caidanYanse">表白</span> </a> </div> <hr style="height:1px;border:none;border-top:1px solid #555555;" /> <div class="mui-input-row" style="text-align: center;"> <a href="javascript:void(0)" class="mui-tab-item " id="gengduo"> <span class="iconfont icon-gengduo" class="caidanYanse"></span> <br/> <span class="caidanYanse">更多</span> </a> </div> </div>
由于上面的代码很多，复杂，凌乱，不好演示。就创建一个简单的div，为了好演示
<div id="map" style="margin-top: 47.8px;"></div> <!-- 测试的悬浮div工具栏 --> <div id="test_map_div"> 我是悬浮的测试的div工具栏 </div>
项目跑起来的结果：并没有我刚才添加的div
这个时候就要看个人的基本功了
操作步骤如下图
发现自己创建的div被百度地图的map的div给顶到下面了，看不到了。
不要紧，这个时候要看css了
position: absolute; top: 50%;
感觉怎么样，是不是很爽呀。简简单单的css
更爽的来了
#test_map_div{ top: 50%; left: 85%; width: 40px; height: 300px; position: absolute; z-index: 9999; border: 1px solid black; border-radius: 9px; background-color: #FFFFFF; }
