Qt如何編寫地圖標注點交互

這篇文章主要講解了“Qt如何編寫地圖標注點交互”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Qt如何編寫地圖標注點交互”吧！

一、前言

地圖項目應用中，標注點的交互使用頻率非常高，這應該是最常用的場景，比如從數據庫中讀取出來設備的信息包括經緯度坐標，然后需要在地圖上顯示對應的設備，這就需要用addMarker函數來動態添加標注點，關于封裝的這個函數，陸陸續續經歷過好多年的完善，很奇怪為啥這么簡單的功能還需要完善，其實這也是實戰項目應用中不斷積累的，滿足各種簡單的和復雜的應用場景而來，這個函數帶有很多參數，至少10個，接下來就羅列下具體的參數含義以及遇到的需求場景。

• v0.1：addMarker(name, point)，很簡單，初學者級別，只需要傳入名稱和經緯度坐標。

• v0.2：addMarker(name, addr, title, tips, point)，多了三個參數，分別是地址、標題、提示內容，最開始做的時候是傳入的字符串內容是啥就顯示啥，后面發現還不夠靈活，比如很多用戶就需要自定義內容甚至顏色進行提示信息顯示，這就需要支持html格式的內容。

• v0.3：addMarker(name, addr, title, tips, width, point, action)，多了兩個參數，一個表示彈框的寬度，當設定了寬度的話就按照設定的值展示，action有3種選擇，表示單擊以后觸發什么動作 0-不處理 1-自己彈框 2-發送信號，默認0表示不處理，如果添加標注點的時候填入的1則按照設定的提示內容進行彈框，2則不彈框，但是會將標識信息信號的形式發給界面，讓界面自己處理，比如單擊一個標注點以后彈窗顯示對應點的實時視頻。

• v0.4：addMarker(name, addr, title, tips, width, point, action, animation, iconfile, iconindex)，多了三個參數，animation表示動畫效果 0-不處理 1-跳動 2-墜落，用來區分不同的設備，iconfile 表示圖標文件路徑，不設置則采用默認圖標，注意圖片的尺寸，iconindex 表示圖標對應在圖片中的索引，本地文件則當做圖片尺寸。提示信息會根據尺寸自動調整到合適位置顯示。

• v0.5：增加刪除標注點函數deleteMarker(name)和移動標注點函數moveMarker(name, point)，如果name為空則表示所有標注點。

二、功能特點

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

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

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

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

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

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

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

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

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

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

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

12. 提供函數接口處理經緯度解析成地址和地址解析成經緯度坐標。

13. 提供的demo直接可以單獨選點執行對應的處理比如路線查詢。

14. 可以拿到路線查詢到的點坐標信息集合，比如用于機器人坐標導航等。

15. 封裝了豐富的函數比如刪除指定點和所有點，刪除指定覆蓋物和所有覆蓋物等。

16. 標注點彈框信息可以自定義內容，標準html格式。

17. 標注點單擊事件可選 0-不處理 1-自己彈框 2-發送信號。

18. 標注點可設置動畫效果 0-不處理 1-跳動 2-墜落

19. 標注點可設置本地圖片文件等。

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

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

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

三、效果圖

四、相關代碼

void MapBaiDu::addMarker(QStringList &list)
{
    //動態添加點
    //name      表示標注點名稱 顯示在圖標旁邊的文本 為空則不顯示
    //addr      表示標注點地址
    //title     表示彈框信息html格式標題
    //tips      表示彈框信息html格式內容
    //width     表示彈框的寬度
    //point     表示經緯度坐標
    //action    表示單擊以后觸發什么動作 0-不處理 1-自己彈框 2-發送信號
    //animation 表示動畫效果 0-不處理 1-跳動 2-墜落
    //iconfile  表示圖標文件路徑,不設置則采用默認圖標,注意圖片的尺寸
    //iconindex 表示圖標對應在圖片中的索引,本地文件則當做圖片尺寸
    list << QString("  function addMarker(name, addr, title, tips, width, point, action, animation, iconfile, iconindex) {");
    list << QString("    var list = point.split(',');");
    //設置點經緯度坐標
    list << QString("    var pot = new BMap.Point(list[0], list[1]);");
    //設置文本文字 offset為對應標簽顯示的位置偏移值
    list << QString("    var label = new BMap.Label(name, {\"offset\":new BMap.Size(20, -10)});");

    //設置圖標,不設置則采用默認圖標
    list << QString("    if (!iconfile) {");
    list << QString("      var marker = new BMap.Marker(pot);");
    list << QString("    } else if (iconfile == 'http://lbsyun.baidu.com/jsdemo/img/fox.gif') {");
    list << QString("      var icon = new BMap.Icon(iconfile, new BMap.Size(300, 157));");
    list << QString("      var marker = new BMap.Marker(pot, {icon: icon});");
    list << QString("    } else if (iconfile == 'http://api.map.baidu.com/img/markers.png') {");
    list << QString("      var icon = new BMap.Icon(iconfile, new BMap.Size(23, 25), {offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - iconindex * 25)});");
    list << QString("      var marker = new BMap.Marker(pot, {icon: icon});");
    list << QString("    } else {");
    list << QString("      var size = 50;");
    list << QString("      if (iconindex) {");
    list << QString("        size = iconindex;");
    list << QString("      }");
    list << QString("      label = new BMap.Label(name, {\"offset\":new BMap.Size(size, -10)});");
    list << QString("      var icon = new BMap.Icon(iconfile, new BMap.Size(size, size));");
    list << QString("      var marker = new BMap.Marker(pot, {icon: icon});");
    list << QString("    }");

    list << QString("    map.addOverlay(marker);");
    list << QString("    if (name != '') {");
    list << QString("      marker.setLabel(label);");
    list << QString("    }");
    list << QString("    addClick(marker, name, addr, title, tips, width, action);");

    //彈跳效果-BMAP_ANIMATION_BOUNCE 墜落效果-BMAP_ANIMATION_DROP
    list << QString("    if (animation == 1) {");
    list << QString("      marker.setAnimation(BMAP_ANIMATION_BOUNCE);");
    list << QString("    } else if (animation == 2) {");
    list << QString("      marker.setAnimation(BMAP_ANIMATION_DROP);");
    list << QString("    }");

    list << QString("  }");
}

void MapBaiDu::addClick(QStringList &list)
{
    //自定義方法顯示標注詳細信息,可以改成自己的內容,標準html格式

    //默認格式如下,在傳入的信息為空的時候應用
    QString title = "<div style=\"color:#CE5521;font-size:15px;\">' + name + '</div>";
    QStringList tips;
    tips << "<table><tr style=\"vertical-align:top;line-height:25px;font-size:12px;\">";
    tips << "<td>地址：</td><td>' + addr + '</td>";
    tips << "</tr></table>";

    list << QString("  function addClick(marker, name, addr, title, tips, width, action){");

    list << QString("    if (title == '' && name != '') {");
    list << QString("      title = '%1';").arg(title);
    list << QString("    }");

    list << QString("    if (tips == '' && addr != '') {");
    list << QString("      tips = '%1';").arg(tips.join(""));
    list << QString("    }");

    list << QString("    var infoWindow = new BMap.InfoWindow(tips, {title:title, width:width});");

    //單擊以后彈出提示信息或者發送信號出去
    list << QString("    var markerClick = function() {");
    list << QString("      if (action == 1) {");
    list << QString("        marker.openInfoWindow(infoWindow);");
    list << QString("      } else if (action == 2) {");
    list << QString("        receiveData('marker', '名稱: '+ name + '  地址: ' + addr);");
    list << QString("      }");
    list << QString("    };");

    //添加單擊監聽器
    list << QString("    marker.addEventListener('click', markerClick);");
    list << QString("  }");
}

感謝各位的閱讀，以上就是“Qt如何編寫地圖標注點交互”的內容了，經過本文的學習后，相信大家對Qt如何編寫地圖標注點交互這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！