百度地图API：自定义控件

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Hello, World</title>
  <style type="text/css">
    html {
      height: 100%;
    }

    body {
      margin: 0px;
      padding: 0px;
      height: 100%;
    }

    #container {
      margin: 100px auto;
      width: 1300px;
      height: 700px;
    }
  </style>
</head>

<body>
<div id="container"></div>
</body>
</html>

JS：

<script type="text/javascript">
  var map = new BMap.Map("container");
  // 创建地图实例
  var point = new BMap.Point(118.024381, 36.812327);
  // 创建点坐标
  map.centerAndZoom(point, 15);
  // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);

  //自定义控件
  function ZoomControl() {
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffest = new BMap.Control();
  }

  //通过JavaScript的prototype属性继承于BMap.Control
  ZoomControl.prototype = new BMap.Control();
  ZoomControl.prototype.initialize = function (map) {
    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 () {
      map.zoomTo(map.getZoom() + 2);
    };
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    // 将DOM元素返回
    return div;
  }
  // 创建控件实例
  var myZoomCtrl = new ZoomControl();
  // 添加到地图当中
  map.addControl(myZoomCtrl);
</script>

 

posted @ 2018-04-28 10:10  _Iniesta  阅读(1116)  评论(0)  编辑  收藏  举报