百度地图小区边界（轮廓）处理

最新推荐文章于 2024-05-22 21:54:15 发布
最新推荐文章于 2024-05-22 21:54:15 发布
阅读量2w 收藏 37
点赞数 11
分类专栏： 编程开发 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhonghuart/article/details/77934693
版权

最近，查了很多资料都没法在百度地图上画出小区边界，经过一番研究后，终于发现了一种方式。以下是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>


晚风残
关注
  • 11
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
生成geojson以及百度地图显示乡镇边界轮廓
05-07
百度api一般只能显示省市县边界，这个是寻找乡镇边界方法以及调用显示边界轮廓实例，经我实测的，确保可用（文档最后是代码）
vue-baidu-map百度地图绘制小区轮廓图
weixin_47475510的博客
04-25 645
主要用做个人记录，怕太久自己忘记了。
调用百度地图API：绘制多个地区的轮廓图
最新发布
knighthood2001
05-22 780
以下代码中，通过更改其中的地名，打开就会高亮具体的地区，并框选轮廓。// 创建多边形覆盖物 fillOpacity设置填充物的不透明度。如果你需要多个地区，你也可以改源代码。'未能获取到该地区的边界数据''未能获取到该地区的边界数据'// 要绘制的地区及对应颜色。// 绘制某个地区的轮廓图。// 绘制多个地区的轮廓图。// 获取行政区域边界。// 创建多边形覆盖物。// 添加覆盖物到地图。// 获取行政区域边界。// 添加覆盖物到地图。
在vue3中，使用百度地图1.0.画出区域轮廓并在地图上添加不同颜色值的marker
u010782109的博客
06-30 795
【代码】在vue3中，使用百度地图1.0.画出区域轮廓并在地图上添加不同颜色值的marker。
百度地图API设置边框及视野
abluer~的博客
01-28 740
百度地图设置边框及视野。
调用百度地图接口获取城市住宅小区边界信息 (米制转经纬度)
Polarisone的博客
07-23 8843
一、背景需求： 在百度地图上查询一个住宅小区, 界面会显示一个小区的边界阴影。大小区、新小区有；一些老小区也没有。我们老大看到了让我也整一个出来，大概就是输入小区名称，地图上展示出这个小区的边界轮廓。 要想展示边界轮廓，那么势必要获取小区的边界坐标。查遍百度地图api，只有获取行政区域轮廓图的方法。所以我采用抓包的方法，看了一下百度地图是怎么操作的。总结出了以下几个步骤。 二、实现方法： 1、获取...
调用百度地图接口获取城市住宅小区边界信息
Neo.Yang的专栏
02-20 1万+
一、 背景描述在百度地图上查询一个住宅小区, 界面会显示一个小区的边界阴影。大小区、新小区有，一些老小小区也没有。这些边界坐标，有时我们也想拿到。用于在做各种地图相关的计算和展示。二、 获取住宅小区边界1.1 获取住宅小区的POI ID。通过百度提供的JS接口LocalSearch的Search方法搜索小区名称，返回LocalResult中包含POI的uid.1.2 调用百度的Web方法查询小区的边
地图小区景点边界轮廓实现
weixin_34137799的博客
09-27 1329
经常的我们在使用地图功能时，会发现在选择一个小区或者一个热门景点的时候，地图上面会给出其边界轮廓，能够方便我们知道其范围大小，有时候在我们使用地图组件的时候，也会面临着类似的需求。比如在地图上面标识出一个商场范围内的热力图，一个热门景点的游览情况等。那么，我们该如何利用地图功能来实现这类效果呢，今天我们一起来探讨一下。 最近我们就有一个...
vue2+echarts+百度地图实现轮廓描边
style1226yi的博客
05-18 1327
echarts+百度地图实现某个省描绘轮廓
百度地图行政边界提取
01-07
android手机APP 通过百度地图获取省市县的行政边界 行政边界结果保存在手机内存的“行政边界”文件夹下 行政边界的坐标是百度坐标，不是WGS84坐标
echarts+百度地图如何定义边界线
04-30
echarts+百度地图如何定义边界线
百度地图地区边界坐标获取
12-28
输入需要获取边界坐标的城市，就可以看到该地图的边界坐标
全国小区数据,最全全国小区数据,全国小区gps,各地小区数据
11-18
数据为全国33万多小区基础数据，sql脚本，直接导入即可。数据信息包括：小区名(name)、省份(province)、城市(city)、区域(area)、地址(address)、纬度(latitude)、经度(longitude)、纬度(GPS)(latitude_gps)、经度(GPS)(longitude_gps)、物业类型(type)、物业费(management_fee)、总建面积(size)、总户数、建造年代、停车位、容积率、绿化率、开发商(producer)、物业公司(management)、相关学校(school)、小区介绍(info) excel表格：https://download.csdn.net/download/wangyue23com/21455651
中国城市边界shape数据(完整)
09-24
中国所有地级市边界shape数据（包含港澳台数据），可用Arcmap、QGIS查看，可导入postgis，使用geoserver发布服务
中国边界轮廓经纬度数据
01-05
中国边界轮廓经纬度数据，可用于中国地图外轮廓绘制
百度地图，地市区域描边
翎墨袅
11-21 569
如果需要某省中的各个地市描边可以点击这个省的进行下载，这里以山东为例，我是先下载了山东的json数据,但是发现只有山东省下各个市的描边，于是又下了中国的数据，把山东的再复制到山东省json里。json粘贴后效果。文件名为370000_full.json。js描边代码（map 是地图实例，自己看着改名）js百度地图标点，鼠标悬浮展示信息（与描边无关）直接复制粘贴进入页面ctrl+s保存就可以了。描边首先需要各个点的经纬度数据。
百度地图坐标点上图,行政区域轮廓的应用
qq_45587146的博客
12-24 704
百度地图行政区域轮廓,坐标点上图
高德地图小区边界获取（2017.05）
热门推荐
jdk137的专栏
05-17 3万+
单个小区边界的获取： chrome打开高德地图，缩放到相应区域打开控制台，搜索小区名，使得地图上就会出现小区正确的轮廓 控制台network中有个poiInfo的请求，打开这个请求，就会看到相应数据。比如： https://gaode.com/service/poiInfo?query_type=IDQ&pagesize=20&pagenum=1&qii=true&cl
百度地图 json边界下载
07-28
百度地图提供了一种方便的方法，可以通过JSON边界下载来获取地图数据。 首先，要使用百度地图JSON边界下载功能，需要使用开发者密钥。开发者密钥用于向百度地图API发送请求，并获取相应的地图数据。 接下来，可以通过发送HTTP GET请求来获取JSON边界数据。在请求URL中，需要包含相应的参数，如请求类型（type）为边界类型（bound）等。百度地图支持多个边界类型，例如省级边界（province）、市级边界（city）和区县级边界（district）等。 请求发送后，百度地图API会返回相应的JSON数据，其中包括了所请求的边界数据。可以通过解析JSON数据，获取到地图的边界坐标信息。 对于省、市、区县等不同级别的边界数据，百度地图提供了相应的接口和参数，可以根据需求进行选择和调整。例如，可以通过设置返回数据的坐标类型（坐标系类型），进行数据的适配和转换。 JSON边界下载功能在许多应用场景中都有广泛的应用。例如，可以通过获取市级边界数据，进行城市边界划定和画图等操作。也可以通过获取区县边界数据，进行行政区划相关的分析和展示等。 总之，百度地图的JSON边界下载功能提供了一种方便的方式，可以获取到所需的地图边界数据。通过发送请求，并解析返回的JSON数据，可以实现对地图数据的灵活应用和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值