二、百度地图二次开发初始化操作

最新推荐文章于 2023-01-09 12:22:21 发布

悠然～.～

最新推荐文章于 2023-01-09 12:22:21 发布

阅读量3.9k

点赞数 1

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

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

版权

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

3 篇文章 0 订阅

订阅专栏

1.初始化百度地图

2.编写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();//启用自动适应容器尺寸变化，默认启用。
		</script>
	</body>

</html>

效果图：

相关解释：

map.enableScrollWheelZoom();// 启用滚轮放大缩小，默认禁用。
map.enableDragging();// 启用地图拖拽，默认启用。
map.enableDoubleClickZoom();// 启用双击放大，默认启用。
map.enableKeyboard();// 启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
map.enableInertialDragging();// 启用地图惯性拖拽，默认禁用。
map.enableContinuousZoom();// 启用连续缩放效果，默认禁用。
map.enablePinchToZoom();// 启用双指操作缩放，默认启用。
map.enableAutoResize();// 启用自动适应容器尺寸变化，默认启用。