百度地图POI爬取（JavaScript语言篇，以武汉市商圈为例）

妖狐艹你老母 2022-05-29 01:00 292阅读 0赞

**前言（不搭后语，推荐略过不看）：** 毕业设计选了个《通过百度地图POI分析城市商圈结构特征》的课题，我作为一个熟(jian)练(dan)使(cao)用(zuo)Echarts的前端开发工(cheng)程(xu)师(yuan)，自然免不了来一发数据可视化，那么问题来了，数据在哪儿弄？当然是买买买啦，啊噗，咋可能，作为一名未来优秀的IT人士，当然是选择用双手成就梦想，自己爬多有成就感是吧，还能装个\*。那么问题又来了，爬虫程序千千万，python语言占一半，可我不会啊···不会就学呗，换个语法而已，编程语言不都一通百通吗(一股傲气)~~十分钟后……这语法，，这空格回车，，这，，字四啥子鬼东西哦，转手就创建了一个Java Class，再转念一想，老夫即以决绝入前端，不写JavaScript对得起自己吗？？随手关掉IDEA，打开了notepad++，然后就开始了JS的爬数据之旅。

# **正文：** #

## **简介：** ##

需要的数据：武汉市主要城市商圈附近各类（衣食住行娱服务）POI点数据  
使用语言及版本：JavaScript（ECMAScript 2015+ 即 ES6）  
开发环境：Windows 10，Chrome 64，Notepad++

## **开发过程：** ##

**1.选择所需要爬取POI的商圈，及其中心的地理坐标。**  
附：使用百度地图API，便推荐使用百度地图自身的坐标拾取系统，因为不同框架或网站所使用的投影偏移量是有一些差异的（若非此原因还请告知），如天地图、Google Map等与BMap共同拾取一点得出的数据都是不同的。  
链接：

1.  [百度地图坐标拾取系统][Link 1]
2.  [百度地图商圈范围查看系统][Link 2]  
    *\*：坐标拾取值受个人主观影响*

{ name:"街道口商圈",coord:[114.360126,30.532832]},
        { name:"光谷商圈",coord:[114.405651,30.511968]},
        { name:"中南商圈",coord:[114.34052,30.545552]},
        { name:"徐东商圈",coord:[114.350659,30.595902]},
        { name:"江汉路商圈",coord:[114.293171,30.590613]},
        { name:"武广商圈",coord:[114.277289,30.586198]},
        { name:"汉正街商圈",coord:[114.281734,30.577378]},
        { name:"王家墩商圈",coord:[114.253693,30.606261]},
        { name:"钟家村商圈",coord:[114.272573,30.554955]},
        { name:"王家湾商圈",coord:[114.214917,30.567876]},

**2.确定半径，使用API**  
本文采用1500M为圆周半径，API文档：[百度地图 JavaScript API][JavaScript API]  
大概过程：①初始化BMap对象（注意需要DOM容器） ②实例化BMap.LocalSearch对象 ③调用searchNearby方法即可进行查询 详细过程不作表述，take is cheap，show you code later。  
附：百度地图JS开发需要申请Key，过程此处略，有需要请参阅文档中开发指南内的入门指南，有详细步骤解读。

**3.编写代码**  
对百度地图POI数据有一定了解的人可能都会知道官方为了防范恶意爬虫，对单次请求所能爬取的数量是有限制的（此刻为760条），但是如果我们的半径范围比较大，查询的关键词匹配点又比较多，760条肯定不够用，怎么解决呢？解决方案就是切割范围，所谓切割范围就是当前区域数据量超过了760条，那就把该区域切成几块，之后再将结果相加，此方案比较容易想到，也比较常用。不过要用此方案，再用圆形区域就不合适了，因此我们只能选择用矩形进行查询与切割，所以商圈坐标点之类的就得改成左下与右上的坐标，方法也要换成searchInBounds。

嗯，，，最后的代码大概就这吊样，我尽可能加了注释·~· 选择的范围某些比较大，一定程度上影响了获得结果的速度，不过由于请求都是异步发送的，所以最终速度主要由最慢的一个请求决定，因此别太急

<!DOCTYPE html> 
    <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"> html,body{ height:100%; margin:0; padding:0; } </style>
    </head> 
    <body>
    <div id="container" style="display:none;"></div>    
    <div id="main" style="width:100%;height:100%;"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=k74dnzzNHEmOsCkzTCxVrKhEH62vcVYP"></script>
    <script type="text/javascript"> //变量、常量等声明在前以便修改 const wh_pois = [ //武汉市几大商圈及其大致区域，范围选取受主观影响 {name:"街道口商圈",coord:[[114.349305,30.521108],[114.365187,30.535137]]}, {name:"光谷商圈",coord:[[114.392249,30.505847],[114.421785,30.51767]]}, {name:"中南商圈",coord:[[114.326778,30.539281],[114.352002,30.54998]]}, {name:"徐东商圈",coord:[[114.344079,30.590915],[114.360751,30.599868]]}, {name:"江汉路商圈",coord:[[114.291582,30.581122],[114.30308,30.591817]]}, {name:"武广商圈",coord:[[114.269789,30.583361],[114.281539,30.597444]]}, {name:"汉正街商圈",coord:[[114.278643,30.574976],[114.285533,30.579376]]}, {name:"王家墩商圈",coord:[[114.256422,30.592439],[114.268927,30.59819]]}, {name:"钟家村商圈",coord:[[114.262135,30.539296],[114.28118,30.560632]]}, {name:"王家湾商圈",coord:[[114.208677,30.562645],[114.236884,30.571103]]}, ]; const keywords = ["服装店","餐馆","酒店","公交站","网吧","银行"]; //查询关键词，对应 衣 食 住 行 娱 服务 window.onload = function(){ const map = new BMap.Map("container"); //初始化一个地图元素 map.centerAndZoom(new BMap.Point(114.32, 30.57), 14); getData(map); }; //顶层函数声明推荐不要使用ES6的箭头函数，因为箭头函数打穿作用域会导致你在函数内部一层作用于的this指向全局 function getData(map){ const arrs = []; //总存储 let once = true; // 只输出一次 //下一段代码涉及到了循环内部嵌类递归，逻辑可能比较复杂，后期我尝试使用进行优化，不知道Promise是否可行 for(let q=0;q<wh_pois.length;q++){ //注意这里推荐使用let或者const，不能用var，涉及到作用域问题 //arr:存储数据的数组 maxPage:结果最多的条件的页面总数 maxI:记录结果最多的条件的下标位置 isMuch:判断是否大于760 let [arr,maxPage,maxI,isMuch] = [[],0,0,false]; arr.address = wh_pois[q].name; const options = { //这个大方法如果是实际业务开发最好细化拆分一下，一块代码太长是很不好的，这里是为了方便查看逻辑 onSearchComplete (results){ if (local.getStatus() === 0){ // 判断状态是否正确 0是BMAP_STATUS_SUCCESS的值 for(let j=0;j<results.length;j++){ if(results[j].getNumPois() === 760){ //判断数据量是否大于760，大于760则进行切割 isMuch = true; break; }else{ isMuch = false; } } if(isMuch){ const oldBounds = results[0].bounds; /*计算切割中心经度，要按纬度切也是没问题的。 这里的Ge Le Ke Fe就是两个端点的坐标由于bounds没有提供getX()之类的方法，就只能直接debug看属性名了*/ const halfLon = Number(((oldBounds.Ge+oldBounds.Le)/2).toFixed(6)); // 查询左区域 local.searchInBounds(keywords, new BMap.Bounds(new BMap.Point(oldBounds.Le,oldBounds.Ke), new BMap.Point(halfLon,oldBounds.Fe))); //查询右区域 local.searchInBounds(keywords, new BMap.Bounds(new BMap.Point(halfLon,oldBounds.Ke), new BMap.Point(oldBounds.Ge,oldBounds.Fe))); }else{ for(let i=0;i<results.length;i++){ !arr[i]?(arr[i] = {}):""; //如果值存在就不用再初始化 arr[i].type = arr[i].type||results[i].keyword; arr[i].pois = arr[i].pois?arr[i].pois.slice(0):[]; for(let k=0;k<results[i].getCurrentNumPois();k++){ arr[i].pois.push(results[i].getPoi(k)) //这样就能进行poi拼接了 } arr[i].count = arr[i].pois.length; maxPage = Math.max(maxPage,results[i].getNumPages()); if(maxPage <= results[i].getNumPages()){ maxI = i; } } if(results[maxI].getPageIndex() < maxPage-1){ //该组数据未搜索完成 local.gotoPage(results[maxI].getPageIndex()+1); }else if(results[maxI].getPageIndex() === maxPage-1){ //该组数据搜索完成 arrs.push(arr); } if (arrs.length === wh_pois.length){ //所有数据搜索完成 // 分段可能导致多次输出，延迟十秒等待第一份数组数据填充结束 if (!once) { return false; } once = false; setTimeout(()=>{saveData(arrs); }, 2000) } } } else{ //这里不写的时候也没啥，不过切割之后每次都有错误报出来（错误码5），对结果没用影响，产生原因有待研究·~· console.warn("请求好像出了点问题，但不影响结果，错误码："+local.getStatus()) } }, pageCapacity:50 //单页数据数量 }; const local = new BMap.LocalSearch(map, options); const poiStart = new BMap.Point(wh_pois[q].coord[0][0], wh_pois[q].coord[0][1]); const poiEnd = new BMap.Point(wh_pois[q].coord[1][0], wh_pois[q].coord[1][1]); const bounds = new BMap.Bounds(poiStart, poiEnd) local.searchInBounds(keywords, bounds); } } function saveData(data){ console.log(data); } </script>
    </body>
    </html>

嗯~ o(*￣▽￣*)o数据篇就到此为止了，接下来是存储篇，我并不打算用熟悉的Java，而是籍此机会学习一下NodeJS的后台开发，存储篇预计没啥人感兴趣，我到时候看有没有什么值得记录的点再决定写不写出来。

[Link 1]: http://api.map.baidu.com/lbsapi/getpoint/index.html
[Link 2]: http://api.map.baidu.com/library/CityList/1.4/examples/CityList.html
[JavaScript API]: http://lbsyun.baidu.com/index.php?title=jspopular