Qt編寫地圖綜合應用6-百度在線地圖

## 一、前言

百度在線地圖的應用老早就做過，後面經過不斷的完善才到今天的這個程序，除了基本的可以載入地圖並設置一些相關的屬性以外，還增加了各種js函數直接異步加載數據比如動態添加點、矩形、圓形、行政區劃等各種。當然最大的是增加了離線地圖的支持，當年這個離線地圖拖了很久很久才去做，最終還是搞定了。

在線地圖沒有太多的難點，搞一個簡單的在線地圖demo絕對是分分鐘幾行代碼的事情，在使用過程中就是改進了幾個小的地方，比如地圖的邊距，需要設置增加一行css為 html,body{height:100%;width:100%;margin:0px;padding:0px;}，比如左下角有個百度的logo，要去除的話也是增加一行css為 .anchorBL{display:none;}，不然發佈出去別人看到了怎麼還有百度的logo怪沒有面子的。再比如滾動條的樣式，很多人說我明明設置了Qt的滾動條樣式啊，為什麼這裡邊的滾動條沒有效果呢？其實這裡面的滾動條是網頁的，並不受控制的，你需要設置網頁的滾動條css如下。

<code>::-webkit-scrollbar{width:0.8em;}
::-webkit-scrollbar-track{background:rgb(241,241,241);}
::-webkit-scrollbar-thumb{background:rgb(188,188,188);}/<code>

## 二、功能特點

1. 同時支持在線地圖和離線地圖兩種模式。

2. 同時支持webkit內核、webengine內核、IE內核。

3. 支持設置多個標註點，信息包括名稱、地址、經緯度。

4. 可設置地圖是否可單擊、拖動、鼠標滾輪縮放。

5. 可設置協議版本、秘鑰、主題樣式、中心座標、中心城市、地理編碼位置等。

6. 可設置地圖縮放比例和級別，縮略圖、比例尺、路況信息等控件的可見。

7. 支持地圖交互，比如鼠標按下獲取對應位置的經緯度。

8. 支持查詢路線，可設置起點位置、終點位置、路線模式、路線方式、路線方案（最少時間、最少換乘、最少步行、不乘地鐵、最短距離、避開高速）。

9. 可顯示點線面工具，可直接在地圖上劃線、點、矩形、圓形等。

10. 可設置行政區劃，指定某個城市區域繪製圖層，在線地圖自動輸出行政區劃邊界點集合到js文件給離線地圖使用。

11. 可靜態或者動態添加多個覆蓋物。支持點、折線、多邊形、矩形、圓形、弧線、點聚合等。

12. 函數接口友好和統一，使用簡單方便，就一個類。

13. 支持js動態交互添加點、刪除點、清空點、重置點，不需要刷新頁面。

14. 支持任意Qt版本、任意系統、任意編譯器。

## 三、體驗地址

國內站點：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)

國際站點：[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)

## 四、效果圖

## 五、相關代碼

<code>void MapBaiDu::addBody(QStringList &list)
{
    //構建網頁主體部分內容
    list << QString("");
    list << QString("  
");

    if (!startAddr.isEmpty()) {
        list << QString("  
");
    }

    list << QString("");
    //百度地圖JS腳本
    list << QString("<script>");<br><br>    //生成QWebChannel通信對象<br>    //重複傳入對象可能會提示 js: Uncaught TypeError: Cannot read property 'receiveDataFromJs' of undefined<br>#ifdef webengine<br>    QString objName = callFun.split(".").first();<br>    objName = objName.isEmpty() ? "objName" : objName;<br>    list << QString("  new QWebChannel(qt.webChannelTransport, function(channel){window.%1 = channel.objects.%1;})").arg(objName);<br>#endif<br>}<br><br>void MapBaiDu::addProperty(QStringList &list)<br>{<br>    //定義百度地圖對象<br>    list << QString("  var map = new BMap.Map(\"map\", {minZoom:%1, maxZoom:%2, enableMapClick:%3});")<br>         .arg(mapMinZoom).arg(mapMaxZoom).arg(enableMapClick ? "true" : "false");<br><br>    //初始化地圖,設置中心點座標或者中心城市和地圖級別.優先按照中心座標設置<br>    //離線地圖需要採用中心點座標的形式<br>    if (mapLocal) {<br>        list << QString("  map.centerAndZoom(new BMap.Point(%1), %2);").arg(mapCenterPoint).arg(mapZoom);<br>    } else if (mapGeocoder.isEmpty()) {<br>        if (!mapCenterPoint.isEmpty()) {<br>            list << QString("  map.centerAndZoom(new BMap.Point(%1), %2);").arg(mapCenterPoint).arg(mapZoom);<br>        } else {<br>            list << QString("  map.centerAndZoom(\"%1\", %2);").arg(mapCenterCity).arg(mapZoom);<br>        }<br>    }<br><br>    //啟用地圖拖拽事件,默認啟用(可不寫)<br>    if (enableDragging) {<br>        list << QString("  map.enableDragging(true);");<br>    }<br><br>    //啟用滾輪放大縮小<br>    if (enableScrollWheelZoom) {<br>        list << QString("  map.enableScrollWheelZoom(true);");<br>    }<br><br>    //啟用鼠標雙擊放大,默認啟用(可不寫)<br>    if (enableDoubleClickZoom) {<br>        list << QString("  map.enableDoubleClickZoom(true);");<br>    }<br><br>    //啟用鍵盤移動<br>    if (enableKeyboard) {<br>        list << QString("  map.enableKeyboard(true);");<br>    }<br><br>    //向地圖中添加縮放控件<br>    if (showNavigationControl) {<br>        list << QString("  map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, type:BMAP_NAVIGATION_CONTROL_LARGE}));");<br>    }<br><br>    //向地圖中添加縮略圖控件<br>    if (showOverviewMapControl) {<br>        list << QString("  map.addControl(new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT, isOpen:1}));");<br>    }<br><br>    //向地圖中添加比例尺控件<br>    if (showScaleControl) {<br>        list << QString("  map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}));");<br>    }<br><br>    //添加地圖類型控件,默認為空則街道圖+衛星圖+三維圖都有<br>    if (showMapTypeControl) {<br>        //街道圖:BMAP_NORMAL_MAP  衛星圖:BMAP_SATELLITE_MAP  混合圖:BMAP_HYBRID_MAP  三維圖:BMAP_PERSPECTIVE_MAP<br>        list << QString("  map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));");<br>    }<br><br>    //添加全景控件<br>    if (showPanoramaCoverageLayer) {<br>        list << QString("  map.addTileLayer(new BMap.PanoramaCoverageLayer());");<br>        list << QString("  var ctrlPan = new BMap.PanoramaControl();");<br>        list << QString("  ctrlPan.setOffset(new BMap.Size(20, 50));");<br>        list << QString("  map.addControl(ctrlPan);");<br>    }<br><br>    //添加路況控件,離線地圖沒有實時路況<br>    if (showTrafficControl && !mapLocal) {<br>        list << QString("  var ctrlTra = new BMapLib.TrafficControl({showPanel:false});");<br>        list << QString("  ctrlTra.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);");<br>        list << QString("  map.addControl(ctrlTra);");<br>    }<br><br>    //設置顏色主題,2019-6開始收費,屏蔽下面這行即可<br>    if (!mapStyleName.isEmpty()) {<br>        //list<<QString(QString("    map.setMapStyle({style:'%1'});").arg(mapStyleName));<br>    }<br><br>    //設置鼠標單擊獲取經度緯度,通過信號發出去<br>    if (enableClickPoint && !callFun.isEmpty()) {<br>        list << QString("  map.addEventListener(\"click\", function(e) {");<br>        list << QString("    window.%1('point', e.point.lng + \",\" + e.point.lat);").arg(callFun);<br>        list << QString("  });");<br>    }<br>}</code></pre>"/<script>/<code>

閱讀更多 Qt自定義控件 的文章

關鍵字: 地圖 Qt