百度地图 添加控件

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>百度地图初始化操作</title>  
        <style type="text/css">  
            #container {  
                width: 50%;  
                height: 500px;  
            }  
        </style>  
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
    </head>  
  
    <body>  
        <div id="container"></div>  
        <script type="text/javascript">  
            //百度地图API功能      
            var map = new BMap.Map("container");  
            map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);  
            //初始化操作  
            map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用。  
            map.enableDragging(); //启用地图拖拽,默认启用。  
            map.enableDoubleClickZoom(); //启用双击放大,默认启用。  
            map.enableKeyboard(); //启用键盘操作,默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。  
            map.enableInertialDragging(); //    启用地图惯性拖拽,默认禁用。  
            map.enableContinuousZoom(); //  启用连续缩放效果,默认禁用。  
            map.enablePinchToZoom(); //启用双指操作缩放,默认启用。  
            map.enableAutoResize(); //启用自动适应容器尺寸变化,默认启用。  
            //添加控件  
            map.addControl(new BMap.NavigationControl({  
                type: BMAP_NAVIGATION_CONTROL_LARGE, //表示显示完整的平移缩放控件。  
//              type: BMAP_NAVIGATION_CONTROL_SMALL, //表示显示小型的平移缩放控件。  
//              type: BMAP_NAVIGATION_CONTROL_PAN, //表示只显示控件的平移部分功能。  
//              type: BMAP_NAVIGATION_CONTROL_ZOOM, //表示只显示控件的缩放部分功能。  
                anchor: BMAP_ANCHOR_TOP_LEFT, //表示控件定位于地图的左上角。  
//              anchor: BMAP_ANCHOR_TOP_RIGHT, //表示控件定位于地图的右上角。  
//              anchor: BMAP_ANCHOR_BOTTOM_LEFT, //表示控件定位于地图的左下角。  
//              anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //表示控件定位于地图的右下角。  
                offset: new BMap.Size(20, -10)  
            })); //设置地图平移缩放控件,PC端默认位于地图左上方type控件外观,anchor控件的停靠位置,offset偏移的位置  
            map.addControl(new BMap.MapTypeControl({  
                type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,//按钮水平方式展示,默认采用此类型展示。  
//              type: BMAP_MAPTYPE_CONTROL_DROPDOWN,//按钮呈下拉列表方式展示。  
//              type: BMAP_MAPTYPE_CONTROL_MAP//以图片方式展示类型控件,设置该类型后无法指定maptypes属性。  
                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]  
            }));//设置地图类型控件,type控件样式,mapTypes控件展示的地图类型,默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型。  
            map.addControl(new BMap.OverviewMapControl({  
                    isOpen: true,  
                    anchor: BMAP_ANCHOR_BOTTOM_RIGHT  
            }));//设置地图类型控件缩略地图控件,默认位于地图右下方,isOpen缩略图是否隐藏  
             map.addControl(new BMap.ScaleControl());//设置比例尺控件  
        </script>  
    </body>  
  
</html>  

 

posted @ 2017-10-11 09:57  夜西门吹雪孤城花满楼  阅读(530)  评论(0编辑  收藏  举报