一、背景需求:
在百度地图上查询一个住宅小区, 界面会显示一个小区的边界阴影。大小区、新小区有;一些老小区也没有。我们老大看到了让我也整一个出来,大概就是输入小区名称,地图上展示出这个小区的边界轮廓。 要想展示边界轮廓,那么势必要获取小区的边界坐标。查遍百度地图api,只有获取行政区域轮廓图的方法。所以我采用抓包的方法,看了一下百度地图是怎么操作的。总结出了以下几个步骤。
二、实现方法:
1、获取小区的uid 获取小区id有两种方法: a、根据抓包得到的百度获取小区uid的链接为:http://map.baidu.com/su?wd=金鹰国际城&cid=347&type=0&pc_ver=2,访问地址,得到结果:
其中s内的几个都是uid,取第一个bbb467bd96bc0a9ccac3db61 b、通过百度提供的JS接口LocalSearch的Search方法搜索小区名称,返回LocalResult中包含POI的uid.
得到返回值pois: 取第一个得到uid: 2、根据小区uid获取小区信息 通过Firefox的Httpfox插件抓包分析,与展示的小区范围相关的url串如下: 经测,其中content里面的geo,就是小区边界坐标集合。 3、获取小区边界坐标进行坐标转换 我们现在所获取到的小区边界坐标集合是百度的米制坐标,现在需要将米制坐标转换为经纬度。百度提供了BMAP_NORMAL_MAP.getProjection()。这个类里面的pointToLngLat(new BMap.Pixel(pos.lng, pos.lat));方法,可以将百度米制坐标转为经纬度。下面,我提供一个批量转换的方法,也就是直接可以把第二步获取的geo作为参数传进方法:
4、根据坐标集画多边形(小区边界轮廓) 现在我们已经取到了小区边界坐标集合,调用百度api,根据坐标点画多边形就好啦~~~ ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5a2808568d859160a764581bd9d19217.png)
三、源码
test6.html
//初始化地图
var value='';
var map = new BMap.Map("allmap");
map.centerAndZoom('连云港市',10);
map.enableScrollWheelZoom();
//定位区域,小地名,使用本地检索方法
var dw=function(){
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.setMarkersSetCallback(function(pois){
console.log(pois);
//清除所有覆盖物后,在叠加第一个点
map.clearOverlays();
for(var i=0;i= 0) {
points = points.split(";");
}
var arr=[];
for (var i=0;i= 0) {
tempco = tempco.replace(";","").split(",");
}
//分割点,两个一组,组成百度米制坐标
var temppoints=[];
for(var i = 0, len = tempco.length; i |