百度地图小区边界(轮廓)处理

最近,查了很多资料都没法在百度地图上画出小区边界,经过一番研究后,终于发现了一种方式。以下是demo的相关说明:

1. demo中小区相关信息查询是基于jsonp的方式处理
2. 使用百度地图需要申请AK,demo中使用的是我个人的申请的,如果demo打开没有效果可能是AK过期了
3. 因为小区轮廓百度没有公布相关API,demo中的接口有可能被百度关闭
4. 可能有的小区并没有相关轮廓数据,所以demo中也无法显示出来


闲话不多说了,直接上代码

1)JS代码(下变第一部分代码)

2)HTML代码(下边第二部分代码)

3)下载地址:http://pan.baidu.com/s/1qY2rAPI

4)效果



var queryHouseOutline = function(hid, callback){
	var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
	var url = baseURL + "&uid=" + hid;
	callback && (window.queryHouseOutlineCallback = callback);
	$.ajax({
		type: "get",
		async: false,
		url: url,
		dataType: "jsonp",
		jsonpCallback: "queryHouseOutlineCallback",
		success: function(datas) {
		}
	});
};

/**
 * 模糊查询小区信息, 无返回值
 * @param {} house	小区名称
 * @param {} city	所属城市名称
 * @param {} ak		百度地图AK
 * @param {} callback	回调函数,该函数可以接收到请求的返回值
 */
var queryHouse = function(house, city, ak, callback){
	var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
	var url = baseURL + "&q=" + house + "&region=" + city + "&ak=" + ak;
	callback && (window.queryHouseCallback = callback);
	$.ajax({
		type: "get",
		async: false,
		url: url,
		dataType: "jsonp",
		jsonpCallback: "queryHouseCallback",
		success: function(datas) {
		}
	});
};

/**
 * 墨卡托坐标转百度坐标
 * @param {} coordinate
 * @return {}
 */
var coordinateToPoints = function(map, coordinate) {
	var points = [];
	if (coordinate) {
		var arr = coordinate.split(";");
		if(arr){
			for(var i = 0; i < arr.length; i++){
				var coord = arr[i].split(",");
				if(coord && coord.length == 2){
					var mctXY = new BMap.Pixel(coord[0], coord[1]);    
					var project = map.getMapType().getProjection();
					var point = project.pointToLngLat(mctXY);   
					points.push(new BMap.Point(point.lng, point.lat));
				}
			}
		}
	}
	return points;
};

/**
 * 墨卡托坐标解析
 * @param {} mocator
 * @return {}
 */
var parseGeo = function(mocator){
	if(typeof mocator != 'string'){
		return {};
	}
	var t = mocator.split("|");
	var n = parseInt(t[0]);
	var i = t[1];
	var r = t[2];
	var o = r.split(";");
	if(n === 4){
		for (var a = [], s = 0; s < o.length - 1; s++){
			"1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
		}
		o = a;
		o.push("");
	}
	var u = [];
	switch(n){
		case 1:
			u.push(o[0]);
			break;
		case 2:
		case 3:
		case 4:
			for (var s = 0; s < o.length - 1; s++) {
				var l = o[s];
				if (l.length > 100){
					l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
									"$1,$2;");
					u.push(l);
				} else {
					for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
						var p = d[f];
						var h = d[f + 1];
						c.push(p + "," + h);
					}
					u.push(c.join(";"))
				}
			}
			break;
		default:
			break;
	}
	
	if(u.length <= 1){
		u = u.toString();
	}
	
	var result = {
		type : n,
		bound : i,
		points : u
	};
	return result;
};


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图DEMO</title>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=E1ec599cbc4a8006eb37d99cf002e054"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/equipmentMapUtil.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var map = new BMap.Map("allmap"); // 创建Map实例
		map.centerAndZoom("深圳", 15);
		map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

		var options = {
			renderOptions : {
				map : map,
				selectFirstResult : true
			},
			onSearchComplete : function(results) {
				//这个函数会被调用两次
			}
		};

		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		
		/**
		 * 第一个参数是城市名,第二参数是小区名 
		 */
		var showArea = function(city, area){
			queryHouse(area, city, "E1ec599cbc4a8006eb37d99cf002e054", function(data){
				if(data.message == 'ok'){
					var houses = data.results;
					if(houses && houses.length > 0){
						var house = houses[0];
						queryHouseOutline(house.uid, function(houseOutline){
							var geo = houseOutline.content.geo;
							if(!geo){
								var location = house.location;
								var point = new BMap.Point(location.lng, location.lat);
								map.centerAndZoom(point, 19);
								var marker = new BMap.Marker(point);
								marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
								map.addOverlay(marker);
							}else{
								map.clearOverlays();
								var geoObj = parseGeo(geo);
								//var bounds = coordinateToPoints(geoObj.bound);
								//边界点
								var points = coordinateToPoints(map, geoObj.points);
								var ply = new BMap.Polygon(points, {
									strokeWeight: 2,
									strokeColor: "#F01B2D",
									strokeOpacity: 0.9,
									fillColor : "#FFEBCC"
								}); //建立多边形覆盖物
								map.addOverlay(ply); //添加覆盖物
								map.setViewport(ply.getPath()); //调整视野 
							}
						});
					}
				}
			});
		};
		
		showArea($('#cityId').val(), $('#areaId').val());
		
		$('#showBtn').click(function(){
			debugger;
			showArea($('#cityId').val(), $('#areaId').val());
		});
	});
</script>
</head>
<body>
	<table>
		<tr>
			<td>城市:</td>
			<td><input id="cityId" type="text" value="深圳" /></td>
			<td>小区:</td>
			<td><input id="areaId" type="text" value="南方科技大学" /></td>
			<td>
				<button id="showBtn">显示</button>
			</td>
		</tr>
	</table>
	<div id="allmap" style="width: 600px; height: 480px;"></div>
	<script type="text/javascript">
		
	</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图DEMO</title>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=E1ec599cbc4a8006eb37d99cf002e054"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/equipmentMapUtil.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var map = new BMap.Map("allmap"); // 创建Map实例
		map.centerAndZoom("深圳", 15);
		map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

		var options = {
			renderOptions : {
				map : map,
				selectFirstResult : true
			},
			onSearchComplete : function(results) {
				//这个函数会被调用两次
			}
		};

		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		
		/**
		 * 第一个参数是城市名,第二参数是小区名 
		 */
		var showArea = function(city, area){
			queryHouse(area, city, "E1ec599cbc4a8006eb37d99cf002e054", function(data){
				if(data.message == 'ok'){
					var houses = data.results;
					if(houses && houses.length > 0){
						var house = houses[0];
						queryHouseOutline(house.uid, function(houseOutline){
							var geo = houseOutline.content.geo;
							if(!geo){
								var location = house.location;
								var point = new BMap.Point(location.lng, location.lat);
								map.centerAndZoom(point, 19);
								var marker = new BMap.Marker(point);
								marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
								map.addOverlay(marker);
							}else{
								map.clearOverlays();
								var geoObj = parseGeo(geo);
								//var bounds = coordinateToPoints(geoObj.bound);
								//边界点
								var points = coordinateToPoints(map, geoObj.points);
								var ply = new BMap.Polygon(points, {
									strokeWeight: 2,
									strokeColor: "#F01B2D",
									strokeOpacity: 0.9,
									fillColor : "#FFEBCC"
								}); //建立多边形覆盖物
								map.addOverlay(ply); //添加覆盖物
								map.setViewport(ply.getPath()); //调整视野 
							}
						});
					}
				}
			});
		};
		
		showArea($('#cityId').val(), $('#areaId').val());
		
		$('#showBtn').click(function(){
			debugger;
			showArea($('#cityId').val(), $('#areaId').val());
		});
	});
</script>
</head>
<body>
	<table>
		<tr>
			<td>城市:</td>
			<td><input id="cityId" type="text" value="深圳" /></td>
			<td>小区:</td>
			<td><input id="areaId" type="text" value="南方科技大学" /></td>
			<td>
				<button id="showBtn">显示</button>
			</td>
		</tr>
	</table>
	<div id="allmap" style="width: 600px; height: 480px;"></div>
	<script type="text/javascript">
		
	</script>
</body>
</html>



没有更多推荐了,返回首页