百度地图自定义控件

百度地图自定义控件

使用场景：使用百度地图时，希望在地图上覆盖自定义的组件。此时需要自定义组件，否则我想不到什么办法可以在地图之上有其他页面进行操作了。
百度地图使用方法：去官网百度地图API,里面介绍的很详细。

使用前准备，script中ak的值******代表的是账号申请的密钥，不收费的。

	<div id="map-container"></div>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=******">
    </script>

接下来是JS代码，我使用的是JQuery，也可使用Vue等，但是得稍微修改一下创建自定义组件函数；注意：①自定义组件这里需要偏移量，偏移量默认使用的是px，但是对于自适应屏幕是存在一定的问题，所以需要获取当前页面的高度，进行按比例自适应，别问自适应比例怎么来的，是一步一步测试的o(╥﹏╥)oo(╥﹏╥)o。②组件不需要在JS中设置样式，可以提前设置好，然后display:none隐藏了，等到需要显示的时候显示出来即可

var windowWidth =  $(window).width()
var windowHeight = $(window).height()
$(function () {
    initMap();
})
//生成地图
function initMap() {
    try {
        let map = new BMapGL.Map("map-container");
        // 创建地图实例
        let point = new BMapGL.Point();
        //获取当前IP所在的地理位置并定位
        let geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                let mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                point = new BMapGL.Point(r.point.lng, r.point.lat);
                //创建点坐标
                map.centerAndZoom(point, 15);
                // 初始化地图，设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                map.setMapStyleV2({
                    styleId: '37b3b3c29905440caac236aaafe53af7'
                });
                
                //创建自定义div并添加到地图中
                map.addControl(createCustomControl($(".left-top-div"),{
                    anchor:BMAP_ANCHOR_TOP_LEFT,
                    offset:new BMapGL.Size(10, 0)
                }));
                map.addControl(createCustomControl($(".left-bottom-div"),{
                    anchor:BMAP_ANCHOR_TOP_LEFT,
                    offset:new BMapGL.Size(10, windowHeight * 0.34)
                }));
                map.addControl(createCustomControl($(".right-top-div"),{
                    anchor:BMAP_ANCHOR_TOP_RIGHT,
                    offset:new BMapGL.Size(10, 0)
                }));
                map.addControl(createCustomControl($(".right-middle-div"),{
                    anchor:BMAP_ANCHOR_TOP_RIGHT,
                    offset:new BMapGL.Size(10, windowHeight * 0.205)
                }));
                map.addControl(createCustomControl($(".right-bottom-div"),{
                    anchor:BMAP_ANCHOR_TOP_RIGHT,
                    offset:new BMapGL.Size(10, windowHeight * 0.568)
                }));
            } else {
                console.log(this)
                alert("网络异常,请稍后再试！！！")
            }
        });
    }
    catch(err){
       alert("网络异常,请稍后再试！！！")
    }

}

/**
 *
 * @param $div 创建的div元素
 * @param position 位置一个对象，包含两个属性anchor(位置)，offset（偏移）
 * @returns {ZoomControl}
 */
function createCustomControl($div,position) {

    //定义一个控件
    function ZoomControl(){
        this.defaultAnchor = position.anchor;
        this.defaultOffset = position.offset;
    }
    //通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMapGL.Control();

    //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
    //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map) {
        //将div添加到地图组件中
        $div.css("display","");
        // 添加DOM元素到地图中
        map.getContainer().appendChild($div[0]);
        // 将DOM元素返回
        return $div[0];
    }
    return new ZoomControl();
}

效果如下：

这样可在五个面板区加入自己需要的功能。