地圖開發筆記(一):百度地圖介紹、使用和Qt內嵌地圖Demo
阿新 • • 發佈:2021-01-10
前言
Qt在地圖方面的研發。
百度地圖
介紹
百度的地圖分為多個開發,都是線上的(離線的需要自己提取,本篇解說線上地圖)。
百度地圖JavaScript API支援HTTP和HTTPS,免費對外開放,可直接使用。介面使用無次數限制。在使用前,您需先申請金鑰才可使用。
目前百度可使用的線上API分為四個版本:
- JavaScript API Lite
百度地圖JavaScript API Lite 版是一套由JavaScript語言編寫的應用程式介面。能夠幫助您在移動端瀏覽器上構建地圖應用。和JavaScript API標準版相比,Lite版專門針對移動端H5頁面的使用場景,程式碼體積小,效能更好。 因為Lite版不支援PC瀏覽器,開發指南中不同功能相應頁面最後均提供二維碼,請使用手機掃描體驗。 - JavaScript API GL
百度地圖JavaScript API GL v1.0是一套由JavaScript語言編寫的應用程式介面,可幫助您在網站中構建功能豐富、互動性強的地圖應用,支援PC端和移動端基於瀏覽器的地圖應用開發,且支援HTML5特性的地圖開發。 - JavaScript API v2.0
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程式介面,可幫助您在網站中構建功能豐富、互動性強的地圖應用,支援PC端和移動端基於瀏覽器的地圖應用開發,且支援HTML5特性的地圖開發。 - JavaScript API v3.0
度地圖JavaScript API是一套由JavaScript語言編寫的應用程式介面,可幫助您在網站中構建功能豐富、互動性強的地圖應用,支援PC端和移動端基於瀏覽器的地圖應用開發,且支援HTML5特性的地圖開發。
申請金鑰
申請地址:http://lbsyun.baidu.com/apiconsole/key?application=key
網頁除錯
Html原始碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>地圖展示</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style> body, html, #container { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微軟雅黑"; } .info { z-index: 999; width: auto; min-width: 22rem; padding: .75rem 1.25rem; margin-left: 1.25rem; position: fixed; top: 1rem; background-color: #fff; border-radius: .25rem; font-size: 14px; color: #666; box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5); } </style> <!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=填你的AK"></script> --> <!-- <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=填你的AK"></script> --> <!-- <script src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=填你的AK"></script> --> <script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=填你的AK"></script> </head> <body> <div class = "info">最新版GL地圖名稱空間為BMapGL, 可按住滑鼠右鍵控制地圖旋轉、修改傾斜角度。</div> <div id="container"></div> </body> </html> <script> var map = new BMapGL.Map('container'); // 建立Map例項 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地圖,設定中心點座標和地圖級別 map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放 </script>
以上程式碼請注意:
執行結果
Demo
載入程式碼
_pWebEngineView = new QWebEngineView(this);
_pWebEnginePage = new QWebEnginePage(this);
_pWebChannel = new QWebChannel(this);
LOG << QFile::exists(_indexFilePath);
_pWebEnginePage->load(QUrl(_indexFilePath));
_pWebEnginePage->setWebChannel(_pWebChannel);
_pWebEngineView->setPage(_pWebEnginePage);
執行結果