一、前言說明
這個地圖組件寫了很多年了，最初設計的比較粗糙，最開始只是為了滿足項目需要，并沒有考慮太多拓展性，比如最初都是按照百度地圖寫死在代碼中，經過這幾年大量的現場實際應用，以及大量的用戶提出的改進意見，逐漸萌生了徹底重新編寫對應地圖相關的代碼，比如基類子類的設計，各種功能接口通過js函數交互，而不是一堆代碼寫在網頁中。
之前的地圖示例寫的比較粗糙，想到什么寫到什么，功能堆積比較嚴重，一直在做加法，導致越發臃腫，包括界面上的功能演示也比較不直觀，所以這次特意花點時間全部重構，包括所有示例都重構，對于過多的示例演示，單獨起了個目錄存放一個個小示例的代碼，拆分開來，使得該分組的功能學習起來非常的方便，之前是一堆示例代碼堆積在一個類中，找起來也要費時間，程序員最煩的就是一個代碼文件中特別多的代碼，能夠做到分組拆分就拆分。
二、功能特點
- 支持多種地圖內核，默認采用百度地圖。
- 同時支持在線地圖和離線地圖兩種模式，離線地圖方便在不聯網的場景中使用。
- 支持各種地圖控件的啟用，比如地圖導航、地圖類型、縮略圖、比例尺、全景導航、實時路況、繪圖工具、結果面板等。
- 支持多種地圖功能的動態啟用禁用，比如地圖拖曳、鍵盤操作、滾輪縮放、雙擊放大、地圖測距。
- 提供眾多js函數接口用于交互，參數極其豐富，能夠想到的應用場景需求都有。
- 統一的信號槽機制，地圖中的結果統一信號發送出去，收到后根據type類型區分。
- 支持地圖交互，比如鼠標按下獲取對應位置的經緯度。單擊標注點彈出對應點的信息。
- 支持添加標注、刪除標注、移動標注、清空標注。
- 標注點可以指定圖標圖片，可以設置旋轉角度，帶富文本提示信息。
- 標注點事件支持單擊發信號通知和自己彈框顯示信息。
- 提供地址轉坐標和坐標轉地址接口。
- 支持各種圖形繪制，包括折線圖、多邊形、矩形、圓形、弧線等。
- 可顯示懸浮的繪圖工具欄，直接在地圖上劃線、標注點、矩形、圓形等。
- 支持各種區域搜索，比如矩形區域、圓形區域，可以按照關鍵字匹配將搜索結果顯示在地圖中。
- 可動態添加離線的行政區邊界點數據。可以搜索行政區劃并獲取該區域的邊界點數據。數據可以保存到文件以便離線使用。
- 支持點聚合功能，多個小標注點合并到一個大標注點，防止點密集導致交互不友好。
- 可以添加海量點，每個點都可以單擊獲取對應坐標和信息。
- 所有的覆蓋物信息比如標注點、矩形、多邊形、折線圖等，都可以主動獲取。
- 支持路徑規劃，支持公交路線、自駕路線、步行路線、騎行路線，不同查詢支持不同策略，可選最少時間、最少換乘、不走高架等。
- 路徑規劃結果顯示在地圖中，也可以獲取到路徑點坐標集合。這個數據可以保存到文件，以便發給機器人或者無人機做導航用來軌跡移動。
- 可以設置不同的地圖視圖比如街道圖、衛星圖、混合圖。
- 可以設置不同的樣式，比如午夜藍、青草綠等樣式風格。
- 提供離線地圖下載模塊，可以選擇不同的地圖內核比如百度地圖或者谷歌地圖，不同的地圖類型比如下載街道圖還是衛星圖，不同的地圖層級，多線程極速下載。
- 表格行實時顯示對應的瓦片下載進度，有下載超時時間，重試次數，每個瓦片下載完成都發送信號通知，參數包括下載用時。
- 提供省市輪廓圖下載模塊，自動下載各個地區的輪廓圖，保存到腳本文件或者文本文件。
- 支持手動調整不同區域的輪廓邊界，調整后可以主動獲取調整后的邊界點集合。
- 提供動態點位示例，手動在地圖上選點并添加標注，附帶自定義的信息比如速度和時間等。
- 提供海量點位示例，批量添加標注點、點聚合、海量點。用于測試環境中支持的最大點位性能。
- 支持GPS坐標轉換，同時提供了在線和離線兩種方式。一般設備接收到的是標準的GPS坐標，在百度地圖上需要轉換成百度的坐標。
- 提供動態軌跡示例，在地圖上鼠標按下選擇起點和終點后，查詢路線，獲取路徑軌跡點，定時器模擬軌跡移動。可以篩選數據將過多的路徑點篩選到設定的點數。
- 提供軌跡回放示例，按照指定的軌跡點列表回放，也可以導入軌跡點數據進行回放。同時支持在街道圖、衛星圖、混合圖中回放軌跡。
- 提供省市區域地圖示例，采用echart組件，同時支持閃爍點圖、遷徙圖、區域地圖、世界地圖、儀表盤等。可以設置標題、提示信息、背景顏色、文字顏色、線條顏色、區域顏色等各種顏色。
- 省市區域地圖示例，內置世界地圖、全國地圖、省份地圖、地區地圖，可以精確到縣，所有地圖全部離線使用。可設置城市的名稱、值、經緯度集合。
- 內置通用瀏覽器組件，同時支持webkit/webengine/miniblink等內核。提供網頁控件示例，演示打開網頁和本地網頁文件。
- 支持任意Qt版本、任意系統、任意編譯器。
三、代碼使用
- 將core_map（地圖組件）/core_webview（瀏覽器組件）這兩個組件目錄拷貝到你的項目目錄，并在pro中填寫引入代碼加入到你的項目中。$$PWD/…/表示上級目錄。
include ($$PWD/../core_map/core_map.pri)
include ($$PWD/../core_webview/core_webview.pri)
- 在pro中啟用地圖內核，比如百度地圖內核對應需要在pro文件中增加一行定義 DEFINES += baidux。
- 引入頭文件。
#include "webview.h"
#include "mapbase.h"
- 新建一個窗體，上面放一個布局，推薦用表格布局 gridlayout，可以放多個瀏覽器控件。
- 實例化瀏覽器類和地圖類。
//實例化瀏覽器控件
WebView *webView = new WebView(this);
//加入到布局
webView->setLayout(ui->gridLayout);
//實例化地圖類/參數2表示何種地圖內核
MapBase *mapObj = MapHelper::getMapObj(this, MapCore_BaiDu);
//傳入網頁控件用于執行函數
mapObj->setWebView(webView);
//加載地圖
mapObj->load();
- 所有地圖相關的函數接口在MapBase類中，可以打開mapbase.h查看具體說明。
- 地圖中大部分的功能都是通過執行js函數來觸發，比如添加標注、添加折線圖等。這些必須嚴格按照提供的js函數名稱和參數來執行。對應示例都提供了相關的調用方法。
- 部分函數接口。
QString js;
//設置地圖級別(值越大放大/越小縮小)
js = "setZoom(9)";
//街道圖衛星圖切換(0-街道圖/1-衛星圖/2-混合圖)
js = "setMapType(1)";
//添加一個標記(北京那邊)
js = QString("addMarker('測試點', '測試地址', '', '', 100, '%1', 2)").arg("116.475836,40.251114");
//最終通過瀏覽器控件執行
webView->runJs(js);
- 瀏覽器組件使用示例。
//實例化瀏覽器控件
WebView *webView = new WebView(this);
//加入到布局
webView->setLayout(ui->verticalLayout);
//打開網址
webView->load("https://www.xxx.com", "", "");
四、相關鏈接
- 體驗地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 名稱：bin_map.zip
- 國內站點：https://gitee.com/feiyangqingyun
- 國際站點：https://github.com/feiyangqingyun
五、效果圖
方法)
