開始前先介紹一下我們的Qt商業控件：

• QtitanRibbon| 下載試用: 遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart | 下載試用 :是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面。
• QtitanNavigation | 下載試用 :模擬Microsoft Dynamics CRM-2016/Office 365導航界面和一組控件改善Qt.C ++應用程序用戶體驗的QtitanNavigation組件。

## 一、前言
在地圖上查詢結果通常以標記點的形式展現，但是如果標記點較多，不僅會大大增加客戶端的渲染時間，讓客戶端變得很卡，而且會讓人產生密集恐懼癥。為了解決這一問題，我們需要一種手段能在用戶有限的可視區域范圍內，利用最小的區域展示出最全面的信息，而又不產生重疊覆蓋。這就是點聚合功能的由來，百度地圖內置類點聚合的功能，在項目初期可能只有個位數的設備需要在地圖上顯示，隨著設備數量的增多，會發現標注點不僅密密麻麻而且變得越發卡頓，這樣就需要有個合并的功能，就某個區域的點都合并到一個點圖標展示，當用戶單擊該合并后的點以后，再去展開具體的詳細的標注點，監控行業、電力行業都用得非常頻繁。

最簡單的設置點聚合的方式是將傳入標注點坐標集合，轉換生成標注點對象數組，再生成的時候可以設置點的名稱、經緯度、其他信息等，然后實例化一個MarkerClusterer對象，再將生成的標注點對象數組傳給這個對象即可。具體的點聚合算法我們也無需知道，基本上都是比較智能的，當我們縮小地圖范圍時候可以看到多個集中的標注點消失了，變成了統一的一個點聚合圖標，單擊此圖標會自動展開下屬的所有標注點，一般建議在設置點聚合的時候要規劃好，哪些標注點屬于哪個點聚合，盡量一個區域內的放在一起。

## 二、功能特點
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版本、任意系統、任意編譯器。

## 三、體驗地址
1. 體驗地址：[](//pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取碼：o05q  文件名：bin_map.zip
2. 國內站點：[](//gitee.com/feiyangqingyun)
3. 國際站點：[](//github.com/feiyangqingyun)
4. 個人主頁：[](//blog.csdn.net/feiyangqingyun)
5. 知乎主頁：[](//www.zhihu.com/people/feiyangqingyun/)

## 四、效果圖

## 五、相關代碼
```cpp

void MapBaiDu::getPoints(QStringList &list)
{
//通用多個點坐標轉換成 BMap.Point 對象
//坐標格式 121.414,31.1828|121.414,31.1838|121.416,31.1838
list << QString("  function getPoints(points) {");
list << QString("    var pts = []");
list << QString("    var listPoint = points.split('|');");
list << QString("    var len = listPoint.length");
list << QString("    for (var i = 0; i < len; i++) {");
list << QString("      var list = listPoint.split(',');");
list << QString("      var pot = new BMap.Point(list[0], list[1]);");
list << QString("      pts.push(pot);");
list << QString("    }");
list << QString("    return pts;");
list << QString("  }");
}


void MapBaiDu::getMarkers(QStringList &list)
{
//通用多個點坐標轉換成 BMap.Marker 對象
//坐標格式 121.414,31.1828|121.414,31.1838|121.416,31.1838
list << QString("  function getMarkers(points) {");
list << QString("    var markers = []");
list << QString("    var listPoint = points.split('|');");
list << QString("    var len = listPoint.length");
list << QString("    for (var i = 0; i < len; i++) {");
list << QString("      var list = listPoint.split(',');");
list << QString("      var pot = new BMap.Point(list[0], list[1]);");
list << QString("      var marker = new BMap.Marker(pot);");
list << QString("      markers.push(marker);");
list << QString("    }");
list << QString("    return markers;");
list << QString("  }");
}


void MapBaiDu::getBounds(QStringList &list)
{
//獲取可視區域經緯度 bssw=左下角 bsne=右上角 bsce=中心
list << QString("  function getBounds() {");
list << QString("    var bs = map.getBounds();");
list << QString("    var bssw = bs.getSouthWest();");
list << QString("    var bsne = bs.getNorthEast();");
list << QString("    var bsce = bs.getCenter();");
list << QString("    var rect = bssw.lng + ',' + bssw.lat + ',' + bsne.lng + ',' + bsne.lat + ',' + bsce.lng + ',' + bsce.lat + ',' + map.getZoom();");
//信號發出去
list << QString("    receiveData('bounds', rect);");
list << QString("  }");
}


void MapBaiDu::getBoundary(QStringList &list)
{
//獲取邊界點集合
list << QString("  function getBoundary() {");
list << QString("    for (var i = 0; i < polygons.length; i++) {");
list << QString("      var polyline = polygons;");
list << QString("      var pts = polyline.getPath();");
list << QString("      var result = '';");
list << QString("      for (var j = 0; j < pts.length; j++) {");
list << QString("        result += pts[j].lng + ',' + pts[j].lat + ';';");
list << QString("      }");
list << QString("      receiveData('newboundary', result);");
list << QString("    }");
list << QString("  }");
}


void MapBaiDu::getZoom(QStringList &list)
{
//獲取當前地圖縮放級別
list << QString("  function getZoom() {");
list << QString("    var zoom = map.getZoom();");
list << QString("    receiveData('zoom', zoom);");
list << QString("  }");
}


void MapBaiDu::addMarkerClusterer(QStringList &list)
{
//動態添加點聚合
list << QString("  function addMarkerClusterer(points) {");
list << QString("    var markers = getMarkers(points);");
//最簡單的用法,生成一個marker數組,然后調用markerClusterer類即可
list << QString("    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});");
list << QString("  }");
}

轉載自：

====================================================

想要了解或購買Qt正版授權的朋友，歡迎

Qt技術交流群現已開通，QQ搜索群號“765444821”或者掃描下方二維碼即可加入