三、添加地图控件

2016-01-06 00:00:06 访问(1893) 赞(0) 踩(0)



<!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>



<script type="text/javascript">
    //Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。 
    //NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。 
    //OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。 
    //ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。 
    //CopyrightControl：版权控件，默认位于地图左下方。


    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>