百度地图-入门级

百度地图API

百度地图API

初始化

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0lPULNZ5PmrFVg76kFuRjezF"></script>
复制代码

var map = new BMap.Map("allmap"); // 创建Map实例

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别

设置allmap盒子的宽高即可显示出来了，大多数不报错不显示都是没有初始化样式。 想要显示两个地图，初始化两次就行，使用不同的变量。

根据城市名设置地图中心点

初始化时，第一个参数为城市名，第二个参数zoom，代表缩放等级。1-19

map.centerAndZoom('北京', 11);

设置最小或者最大缩放等级

创建实例后面可以设置地图允许的最小/大级别

var map = new BMap.Map("allmap"，{minZoom:4,maxZoom:16}); // 创建Map实例

移动，缩放，拖拽地图

setTimeout(function(){
	map.panTo(new BMap.Point(113.262232,23.154345));   //两秒后移动到广州
}, 2000);

setTimeout(function(){
	map.setZoom(14);   //2秒后放大到14级
}, 2000);  

map.disableDragging();     //禁止拖拽
setTimeout(function(){
	map.enableDragging();   //两秒后开启拖拽
	//map.enableInertialDragging();   //两秒后开启惯性拖拽
}, 2000);
复制代码

setZoom()设置地图等级

getZoom()获取地图等级

地图控件

1，地图、混合

//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	
复制代码

2，缩放

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件

var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮

/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	
	//添加控件和比例尺
	function add_control(){
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		map.addControl(top_right_navigation);    
	}
	//移除控件和比例尺
	function delete_control(){
		map.removeControl(top_left_control);     
		map.removeControl(top_left_navigation);  
		map.removeControl(top_right_navigation); 
	}
复制代码

转载于:https://juejin.im/post/5d352916e51d45508c2fb913