一、前言
離線地圖的核心其實就是拿到這些瓦片地圖文件，並不是離線地圖的代碼怎么寫，其實離線地圖的網頁代碼和在線地圖的網頁代碼幾乎一致的，主要就是將對應的依賴的js文件從在線的地址改成本地的地址，然后可能多幾個特殊的js文件用來本地交互，離線地圖完全具備在線地圖的大部分功能，離線地圖有個好處就是可以離線使用，根本不需要聯網，而且也不需要什么秘鑰，你只要搞到那些瓦片地圖文件就隨便你怎么摩擦了。其實在線地圖也是通過讀取服務器上的離線地圖文件加載到網頁中的，你在快速的縮放和拖動地圖的時候可以看到縫隙和空白，估計此刻就是在從服務器拉取瓦片地圖文件來加載，而且這個服務器上的瓦片地圖永遠是最新的最完整的。
離線地圖相比於在線地圖有這么幾個地方要注意，一個是設置地圖中心點默認只支持經緯度坐標而不支持城市名稱，在線的城市名稱是可以的那是因為服務器會給你自動轉換成經緯度，離線地圖如果也想這樣的話需要自己寫一個js文件專門用於枚舉羅列出來各個城市對應的經緯度坐標，傳入城市名稱查詢經緯度，然后再去設置地圖中心點。還一個要注意的是獲取指定行政區域名稱獲取邊界的，這個在線地圖也是服務器去執行的，而離線地圖就沒有這個功能，總之可以想到的需要通過服務器執行的，離線地圖就直接做不到，需要自己額外編寫js代碼去實現，在官方提供的離線地圖的js文件夾中是沒有對應的文件。
二、功能特點
- 同時支持在線地圖和離線地圖兩種模式。
- 同時支持webkit內核、webengine內核、IE內核。
- 支持設置多個標注點，信息包括名稱、地址、經緯度。
- 可設置地圖是否可單擊、拖動、鼠標滾輪縮放。
- 可設置協議版本、秘鑰、主題樣式、中心坐標、中心城市、地理編碼位置等。
- 可設置地圖縮放比例和級別，縮略圖、比例尺、路況信息等控件的可見。
- 支持地圖交互，比如鼠標按下獲取對應位置的經緯度。
- 支持查詢路線，可設置起點位置、終點位置、路線模式、路線方式、路線方案（最少時間、最少換乘、最少步行、不乘地鐵、最短距離、避開高速）。
- 可顯示點線面工具，可直接在地圖上划線、點、矩形、圓形等。
- 可設置行政區划，指定某個城市區域繪制圖層，在線地圖自動輸出行政區划邊界點集合到js文件給離線地圖使用。
- 可靜態或者動態添加多個覆蓋物。支持點、折線、多邊形、矩形、圓形、弧線、點聚合等。
- 函數接口友好和統一，使用簡單方便，就一個類。
- 支持js動態交互添加點、刪除點、清空點、重置點，不需要刷新頁面。
- 支持任意Qt版本、任意系統、任意編譯器。
三、體驗地址
- 體驗地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 名稱：bin_map.zip
- 國內站點：https://gitee.com/feiyangqingyun
- 國際站點：https://github.com/feiyangqingyun
- 個人主頁：https://blog.csdn.net/feiyangqingyun
- 知乎主頁：https://www.zhihu.com/people/feiyangqingyun/
四、效果圖
五、相關代碼
void MapBaiDu::addHead(QStringList &list)
{
//構建網頁頭部
list << QString("<html>");
list << QString("<head>");
list << QString("<title>%1</title>").arg(title);
list << QString("<meta http-equiv=\"Content-Type\" content=\"text/list; charset=utf-8\" />");
//地圖頁面樣式
list << QString("<style type=\"text/css\">");
//頁面寬度高度占比
list << QString(" html,body{height:100%;width:100%;margin:0px;padding:0px;}");
//隱藏左下角的logo
list << QString(" .anchorBL{display:none;}");
if (startAddr.isEmpty()) {
list << QString(" #map{height:100%;width:100%;}");
} else {
list << QString(" #map{height:%1px;width:100%;}").arg(height);
list << QString(" #result,#result table{width:100%;font-size:12px;}");
}
//webkit瀏覽器滾動條樣式
list << QString(" ::-webkit-scrollbar{width:0.8em;}");
list << QString(" ::-webkit-scrollbar-track{background:rgb(241,241,241);}");
list << QString(" ::-webkit-scrollbar-thumb{background:rgb(188,188,188);}");
list << QString("</style>");
//引入webchannel.js
#ifdef webengine
list << QString("<script type=\"text/javascript\" src=\"qwebchannel.js\"></script>");
#endif
//在線和離線地圖加載的文件路徑不一樣
if (mapLocal) {
//引入百度地圖JS文件
list << QString("<script type=\"text/javascript\" src=\"map_load.js\"></script>");
//引入CurveLine JS文件,只有當繪制弧線的時候才需要,如果不需要繪制弧線可以注釋
list << QString("<script type=\"text/javascript\" src=\"tools/CurveLine.min.js\"></script>");
//加載點聚合需要下面兩個js文件
list << QString("<script type=\"text/javascript\" src=\"tools/TextIconOverlay_min.js\"></script>");
list << QString("<script type=\"text/javascript\" src=\"tools/MarkerClusterer_min.js\"></script>");
//引入行政區划輪廓圖JS文件
list << QString("<script type=\"text/javascript\" src=\"citypointjs/%1.js\"></script>").arg(cityJsName);
//引入鼠標繪制工具JS文件
if (showOverlayTool) {
list << QString("<script type=\"text/javascript\" src=\"tools/DrawingManager_min.js\"></script>");
list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"tools/DrawingManager_min.css\"/>");
}
} else {
//引入百度地圖JS文件
list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=%1\"></script>").arg(mapVersionKey);
//引入CurveLine JS文件,只有當繪制弧線的時候才需要,如果不需要繪制弧線可以注釋
list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js\"></script>");
//加載點聚合需要下面兩個js文件
list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js\"></script>");
list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js\"></script>");
//引入實時路況JS文件
if (showTrafficControl) {
list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js\"></script>");
list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css\"/>");
}
//引入鼠標繪制工具JS文件
if (showOverlayTool) {
list << QString("<script type=\"text/javascript\" src=\"http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js\"></script>");
list << QString("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css\"/>");
}
}
list << QString("</head>");
}