百度地图开发如何自定义控件（无敌的解决办法）

手撕代码八百里

发布于 2020-07-29 09:56:52

6260

发布于 2020-07-29 09:56:52

文章被收录于专栏：猿计划猿计划

为什么写？

问题起因:开发一个利用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;
}

如果有问题可以给我留言，看到会第一时间回复的，或者我邮箱：8042965@qq.com

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-12-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

css

登录后参与评论

0 条评论

热度