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