## 一、前言
國內提供地圖服務的廠家基本上是五家，百度地圖、高德地圖、騰訊地圖、搜狗地圖、天地圖，國外的一般還有谷歌地圖、微軟地圖（BING地圖），這幾家的地圖服務的api接口都大同小異，甚至很多函數的名字都一模一樣，畢竟叫的很通俗，這樣也很容易理解，除了引入的地圖服務JS文件不同，對象名稱不同，其他大多數都類似，這就給了程序員很方便的統一的思路，整體上的流程都如下：
1. 註冊賬號申請對應的秘鑰
2. 秘鑰可以自行選擇對應的可用的功能
3. 引入地圖JS文件，一個固定的地址帶上版本和秘鑰
4. 在網頁的body中設置一個div圖層對象用來存放地圖
5. 將地圖對象new出來，設置地圖的屬性
6. 設置屬性既可以是調用方法也可以是直接類似json數據的格式放置
7. 自定義JS函數設置其他功能與界面交互
## 二、功能特點
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 MapGaoDe::addProperty(QStringList &list)
{
if (mapType == 0) {
//定義地圖對象
list << QString(" var map = new AMap.Map('map', {");
list << QString(" zoom:%1,").arg(mapZoom);
list << QString(" zooms:[%1, %2],").arg(mapMinZoom).arg(mapMaxZoom);
list << QString(" zoomEnable:%1,").arg("true");
list << QString(" dragEnable:%1,").arg(enableDragging ? "true" : "false");
list << QString(" doubleClickZoom:%1,").arg(enableDoubleClickZoom ? "true" : "false");
list << QString(" keyboardEnable:%1,").arg(enableKeyboard ? "true" : "false");
list << QString(" scrollWheel:%1,").arg(enableScrollWheelZoom ? "true" : "false");
list << QString(" mapStyle:'amap://styles/%1'").arg(mapStyleName);
list << QString(" });");
} else if (!mapLocal) {
}
//初始化地圖,設置中心點座標或者中心城市和地圖級別.優先按照中心座標設置
//離線地圖需要採用中心點座標的形式
if (!mapCenterPoint.isEmpty()) {
list << QString(" map.setCenter([%1]);").arg(mapCenterPoint);
} else {
list << QString(" map.setCity('%1');").arg(mapCenterCity);
}
//通過獨立的UI組件來加載
list << QString(" AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {");
//添加縮放控件
if (showNavigationControl) {
//lb=left bottom lt=left top
list << QString(" map.addControl(new BasicControl.Zoom({position:'lt', showZoomNum:true}));");
}
//添加圖層控件
if (showMapTypeControl) {
list << QString(" map.addControl(new BasicControl.LayerSwitcher({position:'rt'}));");
}
//添加路況控件,離線地圖沒有實時路況
if (showTrafficControl && !mapLocal) {
list << QString(" map.addControl(new BasicControl.Traffic({position:'rb'}));");
}
list < < QString(" });");
//設置鼠標單擊獲取經度緯度,通過信號發出去
if (enableClickPoint) {
list << QString(" map.on('click', function(e) {");
list << QString(" window.%1('point', e.lnglat.getLng() + "," + e.lnglat.getLat());").arg(callFun);
list << QString(" });");
}
}
void MapTengXun::addProperty(QStringList &list)
{
if (mapType == 0) {
//定義地圖對象
list << QString(" var point = new qq.maps.LatLng(%1);").arg(mapCenterPoint);
list << QString(" var map = new qq.maps.Map('map', {");
list << QString(" center:point,");
list << QString(" zoom:%1,").arg(mapZoom);
list << QString(" zooms:[%1, %2],").arg(mapMinZoom).arg(mapMaxZoom);
list << QString(" zoomEnable:%1,").arg("true");
list << QString(" dragEnable:%1,").arg(enableDragging ? "true" : "false");
list << QString(" doubleClickZoom:%1,").arg(enableDoubleClickZoom ? "true" : "false");
list << QString(" keyboardEnable:%1,").arg(enableKeyboard ? "true" : "false");
list << QString(" scrollWheel:%1,").arg(enableScrollWheelZoom ? "true" : "false");
list << QString(" mapStyleId:'%1'").arg(mapStyleName);
list << QString(" });");
} else if (!mapLocal) {
}
//初始化地圖,設置中心點座標或者中心城市和地圖級別.優先按照中心座標設置
//離線地圖需要採用中心點座標的形式
if (!mapCenterPoint.isEmpty()) {
list << QString(" map.panTo(new qq.maps.LatLng(%1));").arg(mapCenterPoint);
} else {
list << QString(" map.panTo('%1');").arg(mapCenterCity);
}
}/<code>
