一、前言
百度地圖本身提供了非常友好完善的JS函數接口用於添加各種覆蓋物,比如標註點、矩形區域、圓形區域、不規則線段、弧形等,基本上涵蓋了各種應用場景,官方的文檔和示例也是比較完善的,雖然示例用的都是html+js,其實只要是會寫程序的程序員都看得懂,比如Qt要與他交互的話直接傳統的交互方式就行,依葫蘆畫瓢將對應的js函數寫在網頁文件中。百度地圖其實提供了浮動工具欄,在線地圖和離線地圖都支持,打開浮動工具欄以後,直接在浮動工具欄選擇對應的覆蓋物直接地圖上繪製就行,然後用js方法去獲取對應覆蓋物的位置座標等信息。
用地圖自身的方法來設置的覆蓋物信息,會隨着地圖的縮放自動縮放,這個還是比較好的方式,還有另外一種方式就是直接放置一個widget透明疊加在網頁地圖控件上,根據地圖移動縮放等變化傳過來的信號,在widget上重新繪製,這個方法對painter繪製掌握長度比較高的同學很方便,畢竟繪製都交給自己來自主控制了。
二、功能特點
- 同時支持在線地圖和離線地圖兩種模式。
- 同時支持webkit內核、webengine內核、miniblink內核、IE內核。
- 支持設置多個標註點,信息包括名稱、地址、經緯度。
- 可設置地圖是否可單擊、拖動、鼠標滾輪縮放。
- 可設置協議版本、祕鑰、主題樣式、中心座標、中心城市、地理編碼位置等。
- 可設置地圖縮放比例和級別,縮略圖、比例尺、路況信息等控件的可見。
- 支持地圖交互,比如鼠標按下獲取對應位置的經緯度。
- 支持查詢路線,可設置起點位置、終點位置、路線模式、路線方式、路線方案(最少時間、最少換乘、最少步行、不乘地鐵、最短距離、避開高速)。
- 可顯示點線面工具,可直接在地圖上劃線、點、矩形、圓形等。
- 可設置行政區劃,指定某個城市區域繪製圖層,在線地圖自動輸出行政區劃邊界點集合到js文件給離線地圖使用。
- 可靜態或者動態添加多個覆蓋物。支持點、折線、多邊形、矩形、圓形、弧線、點聚合等。
- 提供函數接口處理經緯度解析成地址和地址解析成經緯度座標。
- 提供的demo直接可以單獨選點執行對應的處理比如路線查詢。
- 可以拿到路線查詢到的點座標信息集合,比如用於機器人座標導航等。
- 封裝了豐富的函數比如刪除指定點和所有點,刪除指定覆蓋物和所有覆蓋物等。
- 標註點彈框信息可以自定義內容,標準html格式。
- 標註點單擊事件可選 0-不處理 1-自己彈框 2-發送信號。
- 標註點可設置動畫效果 0-不處理 1-跳動 2-墜落
- 標註點可設置本地圖片文件等。
- 函數接口友好和統一,使用簡單方便,就一個類。
- 支持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::addPolyline(QStringList &list)
{
//覆蓋物通用屬性,包括顏色線條粗細等,可以自行更改
QString property = getOverlayProperty();
//動態添加折線
list << QString(" function addPolyline(points) {");
list << QString(" var pts = getPoints(points);");
list << QString(" var polyline = new %1.Polyline(pts, %2);").arg(mapFlag).arg(property);
list << QString(" map.addOverlay(polyline);");
list << QString(" }");
}
void MapBaiDu::addPolygon(QStringList &list)
{
//覆蓋物通用屬性,包括顏色線條粗細等,可以自行更改
QString property = getOverlayProperty();
//動態添加多邊形
list << QString(" function addPolygon(points) {");
list << QString(" var pts = getPoints(points);");
list << QString(" var polygon = new %1.Polygon(pts, %2);").arg(mapFlag).arg(property);
list << QString(" map.addOverlay(polygon);");
list << QString(" }");
}
void MapBaiDu::addRectangle(QStringList &list)
{
//覆蓋物通用屬性,包括顏色線條粗細等,可以自行更改
QString property = getOverlayProperty();
//動態添加矩形
list << QString(" function addRectangle(points) {");
list << QString(" var listPoint = points.split('|');");
list << QString(" if (listPoint.length != 2) {");
list << QString(" return;");
list << QString(" }");
//將兩個座標拆分成四個點
list << QString(" var list1 = listPoint[0].split(',');");
list << QString(" var list2 = listPoint[1].split(',');");
list << QString(" var ptStart = new %1.Point(list1[0], list1[1]);").arg(mapFlag);
list << QString(" var ptEnd = new %1.Point(list2[0], list2[1]);").arg(mapFlag);
list << QString(" var pt1 = new %1.Point(ptStart.lng, ptStart.lat);").arg(mapFlag);
list << QString(" var pt2 = new %1.Point(ptEnd.lng, ptStart.lat);").arg(mapFlag);
list << QString(" var pt3 = new %1.Point(ptEnd.lng, ptEnd.lat);").arg(mapFlag);
list << QString(" var pt4 = new %1.Point(ptStart.lng, ptEnd.lat);").arg(mapFlag);
list << QString(" var rectangle = new %1.Polygon([pt1,pt2,pt3,pt4], %2);").arg(mapFlag).arg(property);
list << QString(" map.addOverlay(rectangle);");
list << QString(" }");
}
void MapBaiDu::addCircle(QStringList &list)
{
//覆蓋物通用屬性,包括顏色線條粗細等,可以自行更改
QString property = getOverlayProperty();
//動態添加圓形
list << QString(" function addCircle(points, radius) {");
list << QString(" var listPoint = points.split('|');");
list << QString(" var list = listPoint[0].split(',');");
list << QString(" var ptCenter = new %1.Point(list[0], list[1]);").arg(mapFlag);
list << QString(" var circle = new %1.Circle(ptCenter, radius, %2);").arg(mapFlag).arg(property);
list << QString(" map.addOverlay(circle);");
list << QString(" }");
}
void MapBaiDu::addCurveLine(QStringList &list)
{
//覆蓋物通用屬性,包括顏色線條粗細等,可以自行更改
QString property = getOverlayProperty();
//動態添加弧線
list << QString(" function addCurveLine(points) {");
list << QString(" var pts = getPoints(points);");
list << QString(" var curveLine = new BMapLib.CurveLine(pts, %1);").arg(property);
list << QString(" map.addOverlay(curveLine);");
//弧線允許拖動
list << QString(" curveLine.enableEditing();");
list << QString(" }");
}