<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>添加地图控件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=59db371659c04947a1ff044e80565718&v=1.1&services=false"></script> 
</head>

<body>
    <h1>添加地图控件</h1>
    <h3>添加了ScaleControl、OverviewMapControl和NavigationControl控件</h3>
  
  <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 
</body>

var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    //map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());

//********************控制控件位置********************************
    //初始化控件时，可提供一个可选参数，参数类型为一个JavaScript对象。其中anchor和offsetX、offsetY共同控制控件在地图上的位置。anchor表示控件停靠在地图的哪个角，允许的值为：

//BMAP_ANCHOR_TOP_LEFT 
    //BMAP_ANCHOR_TOP_RIGHT 
    //BMAP_ANCHOR_BOTTOM_LEFT 
    //BMAP_ANCHOR_BOTTOM_RIGHT

//    var opts = { anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10) }
    //    map.addControl(new BMap.NavigationControl(opts));

//**********************修改控件配置**********************************
    //地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。 
    //本示例将调整平移缩放地图控件的外观。
    var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
    map.addControl(new BMap.NavigationControl(opts));

</script>
</html>

运行脚本复制代码另存代码