三、百度地图二次开发添加控件

最新推荐文章于 2024-10-16 12:03:16 发布

悠然～.～

最新推荐文章于 2024-10-16 12:03:16 发布

阅读量4.2k

点赞数 2

分类专栏：前端-百度地图文章标签：百度地图

本文链接：https://blog.csdn.net/lze693/article/details/54286022

版权

前端-百度地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.初始化百度地图

2.初始化操作

3.写js

源码：

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

效果图：