版权声明：禁止转载 https://blog.csdn.net/ipfpm/article/details/81065595
（一）使用html的方式（QWidget）：
（1）QT通过加载html的形式显示地图
mainMapView = new QWebEngineView(this);
mainMapView->load(QUrl("qrc:/files/resource/file/mainMapView.html"));
mainMapView->resize(MAIN_DISPALY_WIDTH,MAIN_DISPALY_HEIGH);
mainMapView->show();（2）在html中是地图API，例如使用的是百度地图API或者任何别的以html显示的地图。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-sacale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Main Map View </title>
<style type="text/css">
body, html,#mainmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ILnVSd1Np6FlpxO8ajKGQi2dtlzNk9w8"></script>
</head>
<body>
<div id="mainmap" ></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("mainmap"); // 创建Map实例
var centerPoint = new BMap.Point(120.787272, 31.59500);
map.centerAndZoom(centerPoint, 17); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_ZOOM }));
map.setMapStyle({style:"dark"});
map.enableScrollWheelZoom(true);
</script>（二）使用mapboxGL跟qtlocation结合的方式（qml）。
int main(int argc, char **argv)
{
QGuiApplication app(argc,argv);
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:///places_map.qml")));
view.setWidth(360);
view.setHeight(640);
view.show();
return app.exec();
}（1）使用在线的mapboxgl（加载显示的很慢，因为需要联网而且是在线的mapboxgl的在线地图）：
//places_map.qml
import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.6
//! [Imports]
Rectangle {
anchors.fill: parent
//! [Initialize Plugin]
Plugin {
id: myPlugin
name: "mapboxgl"
PluginParameter {
name: "mapboxgl.access_token"
value: "pk.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA"
}
}
Map {
id: map
anchors.fill: parent
plugin: myPlugin;
center: QtPositioning.coordinate(60.170448, 24.942046)//helsen
zoomLevel: 15
}
}（2）使用本地（离线）mapboxgl地图栅片。
说明：自己需要提前知道如何实现mapboxgl的本地化。
//places_map.qml
//! [Imports]
import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.9
//! [Imports]
Rectangle {
anchors.fill: parent
Map {
id: map
anchors.fill: parent
plugin: Plugin {
name: "mapboxgl"
PluginParameter {
name: "mapboxgl.mapping.additional_style_urls"
value: "qrc:/MapBoxGLStyle.json"
}
}
center: QtPositioning.coordinate(34.400066, 117.469521)//jiawang
zoomLevel: 11
}
}
其中，MapBoxGLStyle.json是mapboxgl的样式文件。很明显的，该文件就是常见的地图本地化的style:中内容
{
"version": 8,
"name": "Satellite",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "default"
},
"sources": {
"mapbox": {
"tiles": [
"http://localhost:8080/XXXXXXXXX"
],
"type": "raster",
"tileSize": 256
}
},
"sprite": "http://localhost:8080/XXXXXXXXXX/",
"glyphs": "http://localhost:8080/XXXXXXXXXXX",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "rgb(4,7,14)"
},
"interactive": true
},
{
"id": "satellite",
"type": "raster",
"source": "mapbox",
"source-layer": "mapbox_satellite_full",
"interactive": true
}
],
}
说明：
如果想要在qml的地图上添加图层，数据源等可使用MapParameter，具体见QT帮助链接
Map {
plugin: MyPlugin
center: QtPositioning.coordinate(60.170448, 24.942046) // Helsinki
zoomLevel: 12
MapParameter {
type: "source"
property var name: "routeSource"
property var sourceType: "geojson"
property var data: '{ "type": "FeatureCollection", "features": \
[{ "type": "Feature", "properties": {}, "geometry": { \
"type": "LineString", "coordinates": [[ 24.934938848018646, \
60.16830257086771 ], [ 24.943315386772156, 60.16227776476442 ]]}}]}'
}
MapParameter {
type: "layer"
property var name: "route"
property var layerType: "line"
property var source: "routeSource"
// Draw under the first road label layer
// of the mapbox-streets style.
property var before: "road-label-small"
}
MapParameter {
type: "paint"
property var layer: "route"
property var lineColor: "blue"
property var lineWidth: 8.0
}
MapParameter {
type: "layout"
property var layer: "route"
property var lineJoin: "round"
property var lineCap: "round"
}
}（三）使用mapbox跟QT。
如果使用mapbox的话可以使用关键字mapboxmmap
MapboxMap {
id: map
anchors.fill: parent
center: QtPositioning.coordinate(60.170448, 24.942046) // Helsinki
zoomLevel: 4.0
minimumZoomLevel: 0
maximumZoomLevel: 20
pixelRatio: 3.0
bearing: bearingSlider.value
pitch: pitchSlider.value
cacheDatabaseMaximalSize: 20*1024*1024
cacheDatabasePath: "/tmp/mbgl-cache.db"
styleJson: '{
"version": 8,
"name": "Empty",
"sources": {
"mapbox://mapbox.mapbox-streets-v6": {
"url": "mapbox://mapbox.mapbox-streets-v6",
"type": "vector"
}
},
"sprite": "mapbox://sprites/tmpsantos/35fb3795",
"glyphs": "mapbox://fonts/tmpsantos/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"metadata": {},
"minzoom": 0,
"maxzoom": 22,
"layout": {
"visibility": "visible"
},
"paint": {
"background-color": "rgba(143,39,39,1)"
},
"interactive": true
},
{
"id": "admin",
"type": "line",
"metadata": {},
"source": "mapbox://mapbox.mapbox-streets-v6",
"source-layer": "admin",
"minzoom": 0,
"maxzoom": 22,
"filter": [
"in",
"$type",
"LineString",
"Polygon",
"Point"
],
"layout": {
"visibility": "visible"
},
"paint": {
"line-color": "rgba(235,204,204,1)",
"line-width": 1
},
"interactive": true
}
],
"draft": false,
"id": "35fb3795",
"modified": "2015-09-04T06:15:21.245Z",
"owner": "tmpsantos",
"visibility": "private",
"created": "2015-09-03T07:50:56.403Z"
}'
}