问题起因:开发一个利用MUI开发的移动端的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 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 id="map" style="margin-top: 47.8px;"></div>
<!-- 测试的悬浮div工具栏 -->
<div id="test_map_div">
我是悬浮的测试的div工具栏
</div>
项目跑起来的结果:并没有我刚才添加的div
操作步骤如下图
发现自己创建的div被百度地图的map的div给顶到下面了,看不到了。
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;
}