百度地图自定义控件

最新推荐文章于 2025-09-06 14:36:30 发布

原创最新推荐文章于 2025-09-06 14:36:30 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#baidu #ZoomControl

baidu 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在百度地图中添加自定义控件，展示了使用12个图标在地图上进行标注的具体实现，提供了不同于官方示例的个性化操作。

如图所示，在百度地图底部添加自定义控件，这里添加的是12个自定义图标，用于在地图上标示。百度有相关的自定义控件示例，这里展示以下自己的实现。

var map = new BMap.Map("map_id");

// 通过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.width="70%";
    div.style.height="30px";
    div.style.margin="10px 0px";
    for (var i=1;i<13;i++){
        //子div
        var childDiv=document.createElement('div');
        childDiv.style.width="8%";
        childDiv.style.height="30px";
        //childDiv.style.background="red";
        childDiv.style.float="left";
        childDiv.style.margin="0px 1px";
        //子div包含图片
        var img=document.createElement('img');
        img.style.width="40%";
        img.style.height="30px";
        img.src="../img/logo/"+i+".png";
        childDiv.appendChild(img);

        //
        var label=document.createElement('label');
        label.style.margin="20px 0px";
        if(i<10){
            label.appendChild(document.createTextNode(""+i));
        }else if(i==10){
            label.appendChild(document.createTextNode("中心"));
        }else if(i==11){
            label.appendChild(document.createTextNode("居住"));
        }else if(i==12){
            label.appendChild(document.createTextNode("办公"));
        }

        childDiv.appendChild(label);
        div.appendChild(childDiv);
    }
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    // 将DOM元素返回
    return div;
}

// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);