乐趣区

制作百度离线地图

jiezi

1、前言

最近公司要给政府机关做项目要用到地图但是只限局域网所以要用到离线地图，在网上搜索了一些有用的文章并成功制作成功百度离线地图，希望能帮助到大家。

2、百度离线地图制作思路

制作百度离线地图，分为 6 步：

  1. 下载百度 JS API 文件为本地文件；
  2. 屏蔽百度 ak 验证；
  3. 引用本地模块资源；
  4. 下载所需城市或地区瓦片；
  5. 按照想要的地区或城市切片；
  6. 加载瓦片改为本地离线瓦片；

2.1、下载百度 JS API 文件为本地文件

访问 baidu map api 地址，代码如下：

(function(){window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript"src="http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20190527152033"></script>');})();

然后复制上面代码中的 http://api.map.baidu.com/gets…，并访问该网址，如图所示：

打开之后我们格式化代码并下载该文件，文件暂时命名为：map_offline_api_v3.0_min.js

2.2、屏蔽百度 ak 验证

打开 map_offline_api_v3.0_min.js 文件，如下：

2.3、引用本地模块资源

百度地图提供的各种图层类，标记类，控件类等等都可以看作是 modules, 当你在地图中用到这些模块时，它会自动加载，因此我们需要先把这些模块的 js 文件下载下来，保存到本地。定位到下面代码，没数错的话，一共是 44 个模块。

var Tb = {
    map: "se12k1",
    common: "jrzmva",
    style: "mqdswt",
    tile: "arfjro",
    groundoverlay: "zel1ht",
    pointcollection: "mprn2z",
    marker: "qqpi40",
    symbol: "4pk2fw",
    canvablepath: "yjpor5",
    vmlcontext: "41oars",
    markeranimation: "niyh4j",
    poly: "at23pi",
    draw: "arixo3",
    drawbysvg: "3vtpy2",
    drawbyvml: "zyy3jn",
    drawbycanvas: "ftbugn",
    infowindow: "itkghs",
    oppc: "xno3ew",
    opmb: "pg3p52",
    menu: "1hsakk",
    control: "r2lwlu",
    navictrl: "euxavb",
    geoctrl: "rxrafb",
    copyrightctrl: "fmarj0",
    citylistcontrol: "2qdahf",
    scommon: "cw3rwv",
    local: "lzkddz",
    route: "s0id2r",
    othersearch: "qmkldj",
    mapclick: "ooymdg",
    buslinesearch: "ltu1xb",
    hotspot: "4kz5w3",
    autocomplete: "fzh4vi",
    coordtrans: "m2wqef",
    coordtransutils: "hc2s5r",
    convertor: "xm44lc",
    clayer: "ikdlfv",
    pservice: "ankscv",
    pcommon: "qboudv",
    panorama: "50hi0x",
    panoramaflash: "rechul"
  };

为了便于修改主文件里的一些内容，先创建一个 map_load.js 文件，加入下面代码：

var bmapcfg = {
  'imgext'      : '.jpg',   // 瓦片图的后缀  根据需要修改，一般是 .png .jpg
  'tiles_dir'   : '',       // 普通瓦片图的地址，为空默认在 tiles/ 目录
};
 
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");  // 获得当前 js 文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); // 地图 API 主目录
(function(){window.BMap_loadScriptTime = (new Date).getTime();
  // 加载地图 API 主文件
  document.write('<script type="text/javascript"src="'+bmapcfg.home+'bmap_offline_api_v3.0_min.js"></script>');

在 bmap_offline_api_v3.0_min.js 文件中定位到

B.url.domain.main_domain_cdn.baidu[0]

将其所在行注释掉，加上这行

B.ka = bmapcfg.home;  // 添加本地工具资源引用(离线路径)

如图：

然后再通过 &mod 进行定位，注释掉其所在行，做如下修改：

这时候就可以创建 modules 文件夹，添加所需模块的 js 文件，注意命名格式，js 代码可以这么获取：

http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_se12k1

保存 js 文件时文件名也是这样如：map_se12k1.js

2.4、下载所需城市或地区瓦片

下载瓦片可以使用网上下载工具, 百度密码：db49

下载的时候可以选择层级，越往下下载的瓦片图片越多，下载完成后，如图所示：

2.5、按照想要的地区或城市切片

略
如果想知道如何切片可以参考此文章

2.6、加载瓦片改为本地离线瓦片

将刚才下载的瓦片 tiles 文件夹下的图片复制到本项目的 titles 文件夹下，如图所示：

复制完成之后，按照下图修改代码：

3、编写 index.html 文件并预览

<!DOCTYPE html>  
<html>  
    <head>  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Hello, World</title>  
        <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
        </style>  
        
        <script type="text/javascript" src="map_load.js"></script>
        
    </head>  
 
    <body>  
        <div id="container"></div> 
        <script type="text/javascript"> 
            
            var map = new BMap.Map("container")
            var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
            map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别  
        </script>  
    </body>  
</html>

目录大致如下所示：

在浏览器中打开 index.html 文件，如下所示：

这样就算你关掉 wifi 或者有线也是可以访问的。

4、制作 python 爬虫爬取 POI 兴趣点到数据库

POI 是“Point of Interest”的缩写，中文可以翻译为“兴趣点”。在地理信息系统中，一个 POI 可以是一栋房子、一个商铺、一个邮筒、一个公交站等。

POI 一般都是上市公司最宝贵的数据，所以一般不会外泄，因此要自己爬取并保存到数据库即可。爬取过程这里就不详细介绍了，可以参考此文章

需要特别注意的是：

  1. 百度地图为了保护数据，单次请求 total 最多为 400，也就是只能搜出 400 个结果，如果搜索结果大于 400 个的时候只显示 400 条记录；
  2. 百度地图为开发者提供的配额为 2000 次请求 / 每天，并发访问的限制为 120。。

5、总结

1）做到这三点：1、下载百度 api、modules 在线文件成离线文件；2、修改下载后的离线文件并配置从之前网上下载瓦片到从本地加载瓦片；3、下载瓦片并复制到自己项目中的 tiles 文件夹；
2）这里我没有做切片的说明，有兴趣的可以参考上面的地址；
3）虽然离线地图制作完成了，但是最重要的还是 POI 兴趣点的获取，比如，获取餐饮、街道、小区、商店等等 POI 数据，这些才是离线地图的核心。
4）项目代码 密码：v5dv

6、引用

  1. 百度离线地图 JS API V3.0
  2. 百度离线地图下载和叠加层瓦片切割
  3. 百度 POI 数据抓取 -BeautifulSoup
  4. 百度地图 POI 数据获取并转为 Excel 文件
  5. 利用百度地图 api 通过城市地址等信息取经纬度
  6. POI
退出移动版