百度地图自定义控件（回到地图中心、地图全屏）

自定义一个回到地图中心并且恢复地图层级的控件

//百度地图API功能 var map = new BMap.Map("allmap", { enableMapClick: false }); // 创建Map实例 map.setMapStyle({ style : 'midnight' }); map.centerAndZoom(new BMap.Point(113.736069, 34.778344), 13); // 初始化地图,设置中心点坐标和地图级别 map.setCurrentCity("郑州"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // 添加地图放大缩小控件----百度自带控件 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_ZOOM, // 启用显示定位 //enableGeolocation: true }); map.addControl(navigationControl); //-----自定义控件开始----- //定义回到地图中心控件类 function ZoomControl() { this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMapGL.Size(12, 52) } //通过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('●')); // 设置样式 div.style.cursor = "pointer"; div.style.padding = "1px 3px"; div.style.boxShadow = "0 2px 4px 0 rgba(27, 142, 236, 0.5)"; div.style.borderRadius = "3px"; div.style.backgroundColor = "white"; // 绑定事件,点击回到地图中心 div.onclick = function(e){ //map.panTo(new BMap.Point(113.736069, 34.778344)); map.centerAndZoom(new BMap.Point(113.736069, 34.778344), 13); } // 添加DOM元素到地图中 map.getContainer().appendChild(div); // 将DOM元素返回 return div; } //创建控件元素 var myZoomCtrl = new ZoomControl(); //添加到地图中 map.addControl(myZoomCtrl);

前几天写过一个实现百度地图全屏的功能： https://blog.csdn.net/qq_42684504/article/details/109154615

也可以把全屏功能自定义为控件： 首先需要一个控件容器： html代码：

<div id="btn" class="btn1 pos-a">全屏</div> <div class="center-bottom" style="width: 100%; height: 75%; float: left;" id="allmap"></div>

id为btn的就是全屏按钮容器

然后写css，给全屏功能添加样式

.btn1{ z-index:999999;margin-left:-5px;color:transparent; background: url(../common/resource/images/qp.png) no-repeat; }

最后就是js代码了，创建控件并添加到地图上就可以了

//定义全屏控件类 function ZoomControl2() { this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; //相当于 right:12px;top:82px; 相对于地图容器的间距 不是body this.defaultOffset = new BMapGL.Size(12, 82) } //通过JavaScript的prototype属性继承于BMap.Control ZoomControl2.prototype = new BMap.Control(); //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回 //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 ZoomControl2.prototype.initialize = function(map) { var div2 = document.getElementById("btn"); // 绑定事件,点击地图全屏 div2.onclick = function(e){ if(document.getElementById("box-center").style.width=="44%"){ document.getElementById("box-left").style.display="none"; document.getElementById("box-right").style.display="none"; document.getElementById("box-center").style.width="100%"; document.getElementById("center-top").style.display="none"; document.getElementById("center-center").style.display="none"; var showMap = document.getElementById("allmap"); showMap.style.width = document.documentElement.clientWidth + "px"; showMap.style.height = document.documentElement.clientHeight + "px"; }else{ document.getElementById("box-left").style.display=""; document.getElementById("box-right").style.display=""; document.getElementById("box-center").style.width="44%"; document.getElementById("center-top").style.display=""; document.getElementById("center-center").style.display=""; var showMap = document.getElementById("allmap"); showMap.style.width = "100%"; showMap.style.height = "75%"; } } // 添加DOM元素到地图中 map.getContainer().appendChild(div2); // 将DOM元素返回 return div2; } //创建控件元素 var myZoomCtrl2 = new ZoomControl2(); //添加到地图中 map.addControl(myZoomCtrl2);

效果图：