百度離線地圖研發--laravel框架

1. JS--API下載
   1. 訪問地址：http://api.map.baidu.com/api?v=3.0（有百度API密鑰的可以加上密鑰：http://api.map.baidu.com/api?v=3.0&ak=密鑰），選擇如圖並訪問
   3. 訪問：http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20200109192240獲得如圖，複製保存下來
   5. 保存文件名自定義：bmap_offline_api_v3.0_min.js
   7. 最後在使用地方引入js
   9.  
2. 修改API文件
   1. 屏蔽ak驗證
      1. 在bmap_offline_api_v3.0_min.js文件中查找Math.random()代碼，多查找幾次具體命名可能會有所不同，並且新增代碼如下，結果如下

      2.         //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                 if (/^http/.test(a)) return;//修改  屏蔽ak驗證，若調用外部資源直接返回
                 //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   2. 設置引入本地資源路徑
      1. 在bmap_offline_api_v3.0_min.js文件中查找url.domain.main_domain_nocdn.baidu或者main_domain_nocdn代碼，多查找幾次具體命名可能會有所不同，並且新增代碼如下，結果如下

      3. D.oa = bmapcfg.home這個等配置mp_load.js後配置，在下步

3. 下載本地資源
   1. 所謂本地資源，就是在使用地圖時需要用到的一些模塊（module），比如圖層類，標記類，控件類。
   2. 首先，在 bmap_offline_api_min.js 文件中，用 &mod= 定位到下面的代碼，然後加一行代碼將用到的模塊打印出來：
   4. 在html頁面中編寫加載百度地圖API
   6. 訪問，在控制檯上獲取打印結果，爲功能需要的模板名
   8. 訪問網址：http://api0.map.bdimg.com/getmodules?v=3.0&t=20140707&mod=模板名，比如http://api0.map.bdimg.com/getmodules?v=3.0&t=20140707&mod=common_yus52z，獲得js資源拷貝到/modules/模板名.js，如圖：
4. 引用本地資源
   1. 在上面步驟打印模塊名的地方，做如下修改：
   3. 要注意路徑問題，如果不對會報錯
5. 加載瓦片資源（資源自行百度下載）
   1. 配置位置
   3. 瓦片配置文件

   4. var bmapcfg = {
          'imgext': '.jpg',   //瓦片圖的後綴  根據需要修改，一般是 .png .jpg
          'tiles_dir': '/baiduOffline/tiles'       //普通瓦片圖的地址，爲空默認在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("/js") + 1); //地圖API主目錄
      

       

   5. 在html中引入該配置文件

   7. 修改瓦片路徑：在bmap_offline_api_v3.0_min.js文件中查找getTilesUrl 代碼，多查找幾次具體命名可能會有所不同，並且修改代碼如下，結果如下

   9.     Hd.getTilesUrl = function (a, b, c) {
              var e = a.x, a = a.y, f = Sb("normal"), g = 1, c = Gd[c];
              // this.map.ax() && (g = 2);
              // e = this.map.Xe.Xv(e, b).Sl;
              // return (Fd[Math.abs(e + a) % Fd.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == z.fa.ma ? "&color_dep=32&colors=50" : "") + "&udt=" + f).replace(/-(\d+)/gi, "M$1")
              //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
              let tdir = bmapcfg.tiles_dir.length > 0 ? bmapcfg.tiles_dir : bmapcfg.home + "tiles";
              // console.log(tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext)
              return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片
              //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
          };

       

6. 刷新頁面出現及成功