百度地图API控件详解与使用-优快云博客

本文链接：https://blog.youkuaiyun.com/Cg_Companion_Xi/article/details/105451246

本文介绍了百度地图API中的控件，包括NavigationControl、OverviewMapControl、ScaleControl、MapTypeControl、CopyrightControl和GeolocationControl。讲解了如何添加控件到地图，设置控件位置偏移以及修改控件配置。同时提到了全景控件的使用和开启鼠标放大功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图API控件介绍

1.Control
控件的抽象基类：所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

2.NavigationControl
地图平移缩放控件：PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。

3.OverviewMapControl
缩略地图控件：默认位于地图右下方，是一个可折叠的缩略地图。

4.ScaleControl
比例尺控件：默认位于地图左下方，显示地图的比例关系。

5.MapTypeControl
地图类型控件：默认位于地图右上方。

6.CopyrightControl
版权控件：默认位于地图左下方。

7.GeolocationControl
定位控件：针对移动端开发，默认位于地图左下方。

怎样在地图中添加控件？

例如添加一个控制地图平移和缩放功能的控件。

	map.addControl(new BMap.NavigationControl());
	//地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。

其他控件的添加方式与上面的操作一致。

控件位置偏移

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。
如下创建的一个比例尺：
Size(150, 5) 其中 150 是距离页面左边的距离；5 则是距离页面下边的距离。

// 控件位置的偏移    
		var opts = {offset: new BMap.Size(150, 5)}
		map.addControl(new BMap.ScaleControl(opts));

修改控件配置

地图API的控件提供了丰富的配置参数。例如，NavigationControl控件就提供了如下类型：
BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。
例如：

	var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
	map.addControl(new BMap.NavigationControl(opts));

全景控件

通过全景控件可以从普通地图进入全景地图。点击全景控件会进入全景图，点击全景图右上角的关闭按钮会退回到普通地图。
Size(30, 60) 其中 30 是距离页面右边的距离；60 则是距离页面上边的距离。

        var stCtrl = new BMap.PanoramaControl();  
		stCtrl.setOffset(new BMap.Size(30, 60));  
		map.addControl(stCtrl);

开启鼠标放大功能

默认情况下，滑轮滚动不会有效果。则需要手动设置为 true.

		map.enableScrollWheelZoom(true);

代码展示：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Hello, World</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		<style type="text/css">  
		    html{
		    	height:100%;
		    }    
		    body{
		    	height:100%;
		    	margin:0px;
		    	padding:0px
		     }    
		    #container{
		        height:100%
		    }    
		</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uI1b6gNEYY0wM795hroafXW0nHhsh7CG"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	</head>
	<body>
		<div id="container"></div> 
		<script>
			// 创建地图实例  
			var map = new BMap.Map("container"); 
			// 创建点坐标  
			// var point = new BMap.Point(116.404, 39.915);
			 // 初始化地图，设置中心点坐标和地图级别  
			map.centerAndZoom(new BMap.Point(114.30, 30.60),11); 
			// 平移缩放控件
			map.addControl(new BMap.NavigationControl());
			// 比例尺
			map.addControl(new BMap.ScaleControl()); 
	
			// 控件位置的偏移，坐标尺    
			var opts = {offset: new BMap.Size(150, 5)}
			map.addControl(new BMap.ScaleControl(opts));
	
			// 全景控件
			var stCtrl = new BMap.PanoramaControl();  
			stCtrl.setOffset(new BMap.Size(100, 60));  
			map.addControl(stCtrl);  
	 
			// 鼠标绘制 提供用户在页面上点击
			var styleOptions = {
			    strokeColor:"red",    //边线颜色。
			    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			    strokeWeight: 3,       //边线的宽度，以像素为单位。
			    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
			    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			    strokeStyle: 'solid' //边线的样式，solid或dashed。
			}
			 //实例化鼠标绘制工具
			var drawingManager = new BMapLib.DrawingManager(map, {
			    isOpen: false, //是否开启绘制模式
			    enableDrawingTool: true, //是否显示工具栏
			    drawingToolOptions: {
			        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
			        offset: new BMap.Size(5, 5), //偏离值
			    },
			    circleOptions: styleOptions, //圆的样式
			    polylineOptions: styleOptions, //线的样式
			    polygonOptions: styleOptions, //多边形的样式
			    rectangleOptions: styleOptions //矩形的样式
			});  
	 		//开启鼠标滚轮缩放
			map.enableScrollWheelZoom(true); 
	</script>
</body>
</html>