首页 > 代码库 > 百度地图开放API示例整理-基本地图和控件

百度地图开放API示例整理-基本地图和控件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=(String)request.getAttribute("ak")%>"></script>
	
	<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
	<title>地图展示</title>
</head>

<body>

	<div id="bts">
	<button onclick="load()">加载地图</button>
	<button onclick="disableScrollWheelZoom()">禁止滚轮缩放</button>
	<button onclick="enableScrollWheelZoom()">开启滚轮缩放</button>
	<button onclick="disableDragging()">禁止拖拽</button>
	<button onclick="enableDragging()">开启拖拽</button>
	<button onclick="areaRestriction()">固定区域</button>
	<button onclick="panToArea()">移动到区域</button>
	<button onclick="getBounds()">获取地图显示范围</button>
	<button onclick="getDistance()">获取两点之间距离</button>
	<button onclick="add_control()">添加控件和比例尺</button>
	<button onclick="delete_control()">移除控件和比例尺</button>
	<button onclick="custome_control()">添加自定义控件</button>
	
	 
	
	</div>
	<div id="allmap"></div>
</body>
<script  type="text/javascript"> 
	// 百度地图API功能
	//支持异步加载地图 参考Demo http://developer.baidu.com/map/jsdemo.htm#a1_5
	//同时加载两个地图 参考Demo http://developer.baidu.com/map/jsdemo.htm#a1_6 (创建两个DOM对象)
	var map = new BMap.Map("allmap");    // 创建Map实例
	//根据城市名设置地图中心点
	map.centerAndZoom("哈尔滨",15);      // 初始化地图,用城市名设置地图中心点 
	
	function load(){
		//var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
		 
		map.centerAndZoom(new BMap.Point(126.639823,45.767792), 11);  // 初始化地图,设置中心点坐标和地图级别
		
		
		
		
		map.setCurrentCity("哈尔滨");          // 设置地图显示的城市 此项是必须设置的
		
	}
	//开启滚轮缩放 
	function enableScrollWheelZoom(){
		 map.enableScrollWheelZoom();              
	}
    //禁止滚轮缩放    
	function disableScrollWheelZoom(){
		 map.disableScrollWheelZoom();       
	}
	  //禁止拖拽
	function  disableDragging(){
		map.disableDragging();   
	}
	//开启拖拽
	function  enableDragging(){
		map.enableDragging();   
		   //map.enableInertialDragging();   //两秒后开启惯性拖拽
	}
	//将地图显示范围设定在指定区域,地图拖出该区域后会重新弹回。 需要AreaRestriction_min.js 支持
	function areaRestriction(){
		
		var b = new BMap.Bounds(new BMap.Point(126.623402,45.772721),new BMap.Point(126.655633,45.761681));
		try {	
			BMapLib.AreaRestriction.setBounds(map, b);
		} catch (e) {
			alert(e);
		}
	}
	
	function panToArea(){
		setTimeout(function(){
		   map.panTo(new BMap.Point(126.560053,45.821232));   //两秒后移动到江北
		   map.setZoom(14);  // 放大到14级
		}, 2000);
	}
	
	function getBounds(){
		//获取地图显示范围
		var bs = map.getBounds();   //获取可视区域
		var bssw = bs.getSouthWest();   //可视区域左下角
		var bsne = bs.getNorthEast();   //可视区域右上角
		alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
	}
	
	function getDistance(){
		//获取两点距离
		var pointA = new BMap.Point(126.598986,45.768308);  // 创建点坐标A--大桥南
		var pointB = new BMap.Point(126.560305,45.806796);  // 创建点坐标B--大桥北
		alert(‘松花江大桥的直线距离是:‘+(map.getDistance(pointA,pointB)).toFixed(2)+‘ 米。‘);  //获取两点距离,保留小数点后两位
		var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
		map.addOverlay(polyline);     //添加折线到地图上
		
		map.panTo(new BMap.Point(126.560305,45.806796));   //两秒后移动到江北
		  map.setZoom(14);  // 放大到14级
	}
	
	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:仅包含缩放按钮*/
	var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
	var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

	var overView = new BMap.OverviewMapControl();
	var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
	
	 // 添加定位控件
	  var geolocationControl = new BMap.GeolocationControl();
	  geolocationControl.addEventListener("locationSuccess", function(e){
	    // 定位成功事件
	    var address = ‘‘;
	    address += e.addressComponent.province;
	    address += e.addressComponent.city;
	    address += e.addressComponent.district;
	    address += e.addressComponent.street;
	    address += e.addressComponent.streetNumber;
	    alert("当前定位地址为:" + address);
	  });
	  geolocationControl.addEventListener("locationError",function(e){
	    // 定位失败事件
	    alert(e.message);
	  });
	
	//添加控件和比例尺
	function add_control(){
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		map.addControl(top_right_navigation);    
		map.addControl(mapType1);    
		map.addControl(mapType2);    
		map.addControl(overView);    
		map.addControl(overViewOpen);    
		  map.addControl(geolocationControl);
	}
	//移除控件和比例尺
	function delete_control(){
		map.removeControl(top_left_control);     
		map.removeControl(top_left_navigation);  
		map.removeControl(top_right_navigation); 
		map.removeControl(mapType1);    
		map.removeControl(mapType2);    
		map.removeControl(overView);    
		map.removeControl(overViewOpen);   
		map.removeControl(geolocationControl);
	}
	
	// 定义一个控件类,即function
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(10, 10);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("放大2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "1px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() + 2);
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	}
	
	function custome_control(){
		
		// 创建控件
		var myZoomCtrl = new ZoomControl();
		// 添加到地图当中
		map.addControl(myZoomCtrl);
	}
</script>
</html>

要有自己的AK哦。。

本文出自 “在路上” 博客,请务必保留此出处http://3409736.blog.51cto.com/3399736/1576577

百度地图开放API示例整理-基本地图和控件