1. 程式人生 > >百度離線地圖api2.0 載入本地瓦片 實現點線面標註 ajax提交(完全內網)

百度離線地圖api2.0 載入本地瓦片 實現點線面標註 ajax提交(完全內網)

簡介:自己修改的離線地圖API 2.0版本, 支援百度電子、衛星地圖任意切換(把兩者的瓦片下載下來放在對應的資料夾中即可),支援點線面標註、測距等,marker可以自定義更改圖示,infowindow可以上傳圖片、視訊(MP4格式)、超連結等。要是不用於實測定位等下載google地圖瓦片也是可以的,以下為效果圖(全來自本地哦):

效果圖

實現方式:

1.html檔案引入核心的apiv.2.0.js(該js主要是通過演算法把一張張瓦片拼裝一整張地圖),引入控制元件、工具類檔案getmodules.js(百度官方是根據不同的需求去請求相應的module,我這裡是把所有modules放入到一個js檔案中,這樣做會降低程式碼執行速率);

2.建立map變數 var map = new BMap.Map("container", mapType: BMAP_NORMAL_MAP);   其他的就和百度線上地圖開發一模一樣啦;

3.所有對地圖的點線面標註的編輯儲存是通過 ajax提交給php,再儲存到資料中,每次訪問在載入完地圖瓦片後都會從資料庫讀取標註內容。

4.值得注意的是要實現上圖功能還需要引入百度的繪圖js和css,我全部放到了本地:

<script type="text/javascript" src="js/apiv.2.0.js"></script>
<script type="text/javascript" src="js/getmodules.js"></script>
<script type="text/javascript" src="js/DistanceTool_min.js"></script>    //測距js
<script type="text/javascript" src="js/DrawingManager_min.js"></script>  //繪圖js
<link rel="stylesheet" href="js/DrawingManager_min.css" />     //繪圖css
加我QQ 494375696 可以發給你js檔案(修改過的離線版)