百度地图API示例之添加自定义控件-优快云博客

本文介绍如何使用百度地图API在网页中嵌入地图，并在地图左上角添加一个自定义的“放大2级”控件。该控件采用红色背景显示，并通过双击操作使地图放大两级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!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="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></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 = "red";
      // 绑定事件,点击一次放大两级
      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>