【QT与android】qt中利用qml实现在qwidget上显示地图并成功部署到安卓

由于项目需求，需要开发一款app包含图传，地图显示与路径规划，之前也利用uniapp做过微信小程序，奈何能力有限，本人也不是计算机专业的，无奈放弃。在设计的过程中也遇到很多问题，找遍资料也没有合适的，自己淋过雨也甘愿为大家撑伞。

1.准备一个qml文件（这个qml文件我是从github上找来的）

import QtQuick 2.9
import QtQuick.Window 2.2
import QtLocation 5.6
import QtPositioning 5.6
import QtQuick.Controls 2.4
import Qt.labs.settings 1.0
import Qt.labs.platform 1.0

Item {
    id: window
    visible: true
    width: 1000
    height: 800
    //color: "#ffffff"
    //title: qsTr("覆盖规划")

    Settings{
        id:settings
        property var jd : 102.6394
        property var wd : 24.9394
    }

    Plugin {
        id: mapPlugin
        name: "osm" // "mapboxgl", "esri", ...
    }

    Item {
        id: itemMenu
        width: 180
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        property var itemList: []

        Row {
            id: row
            y: 10
            height: 40
            spacing: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10

            Label {
                id: label
                width: 50
                height: 40
                text: qsTr("经度：")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 13
            }

            Rectangle {
                id: rectangle
                width: 100
                height: 40
                color: "#ffffff"
                border.color: "#b0b8b4"
                border.width: 2

                TextInput {
                    id: textInput_JD
                    height: 20
                    text: settings.jd
                    clip: true
                    anchors.rightMargin: 5
                    anchors.leftMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.left: parent.left
                    font.pointSize: 12
                }
            }
        }

        Row {
            id: row1
            x: 7
            y: 60
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 10
            Label {
                id: label1
                width: 50
                height: 40
                text: qsTr("纬度：")
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 13
            }

            Rectangle {
                id: rectangle1
                width: 100
                height: 40
                color: "#ffffff"
                border.color: "#b0b8b4"
                TextInput {
                    id: textInput_WD
                    height: 20
                    text: settings.wd
                    cursorVisible: true
                    clip: true
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    font.pointSize: 12
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: 5
                }
                border.width: 2
            }
            anchors.right: parent.right
            spacing: 10
            anchors.rightMargin: 10
        }

        Row {
            id: row2
            y: 110
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 10
            Label {
                id: label2
                width: 50
                height: 40
                text: qsTr("半径：")
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 13
            }

            Rectangle {
                id: rectangle2
                width: 100
                height: 40
                color: "#ffffff"
                border.color: "#b0b8b4"
                TextInput {
                    id: textInput_Distance
                    height: 20
                    text: qsTr("")
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    font.pointSize: 12
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.rightMargin: 5
                }
                border.width: 2
            }
            anchors.right: parent.right
            spacing: 10
            anchors.rightMargin: 10
        }

        Row {
            id: row3
            x: -9
            y: 160
            height: 40
            anchors.left: parent.left
            anchors.leftMargin: 8
            Label {
                id: label3
                width: 50
                height: 40
                text: qsTr("颜色：")
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 13
            }

            Rectangle {
                id: rectangle_color
                width: 100
                height: 40
                color: "#cc72f462"
                border.color: "#b0b8b4"
                border.width: 0
                MouseArea{
                    id: mouseArea
                    anchors.fill: parent
                    onClicked: colorDialog.open()
                }
            }
            anchors.right: parent.right
            spacing: 10
            anchors.rightMargin: 12
        }
    }

    Map {
        id:myMap
        anchors.leftMargin: 180
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(settings.wd, settings.jd) // Oslo
        zoomLevel: 11
        property bool measure: false

        MouseArea {
            id: mouseArea_measure
            anchors.fill: parent
            acceptedButtons: Qt.RightButton | Qt.LeftButton
            hoverEnabled: true
            onClicked: {
                if(mouse.button === Qt.RightButton){
                    if(!lineObj.start){
                        myMap.measure = true
                        lineObj.path = []
                        var c = myMap.toCoordinate(Qt.point(mouse.x, mouse.y))
                        lineObj.addCoordinate(c)
                        lineObj.start = true
                    }else{
                        myMap.measure = false
                        var c = myMap.toCoordinate(Qt.point(mouse.x, mouse.y))
                        lineObj.addCoordinate(c)
                        lineObj.start = false
                    }
                }
            }

            onPositionChanged:{
                    if(myMap.measure){
                        var c = myMap.toCoordinate(Qt.point(mouse.x, mouse.y))
                        var path = lineObj.path;
                        path[1] = c;
                        lineObj.path = path;
                        distanceLabel.coordinate = c
                        var dis = c.distanceTo(path[0])
                        distanceLabel.text ="   距离："+Math.round(dis)/1000+"千米"
                }
            }
            onDoubleClicked: {
                if(mouse.button === Qt.LeftButton){
                   var c = myMap.toCoordinate(Qt.point(mouse.x, mouse.y))
                   textInput_JD.text = c.longitude.toFixed(6)
                   textInput_WD.text = c.latitude.toFixed(6)
                }
            }
        }

        MapPolyline {
            id:lineObj
            line.width: 3
            line.color: 'green'
            path: []

            property bool start: false
        }

        MapQuickItem{
            id:distanceLabel
            property string text: ''
            sourceItem:Label{
                color: "darkturquoise"
                font.bold: true
                font.pointSize: 15
                font.family: "微软雅黑"
                text: distanceLabel.text
            }
        }
    }

    ColorDialog {
        id: colorDialog
        options:ColorDialog.ShowAlphaChannel
        onAccepted: {
            rectangle_color.color = colorDialog.currentColor
        }
    }

}

 2.qml文件放置在resources文件夹下

3.在ui界面下放置一个QQuickWidget，这里我取的map_1

4.在.cpp文件中写下三行代码即可（当时找资料找了两天T.T）

#include "second.h"
#include "ui_second.h"
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QApplication>
#include <QUrl>
#include <QtQuickWidgets/QQuickWidget>

second::second(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::second)
{


    ui->setupUi(this);

    ui->map_1->setResizeMode(QQuickWidget::SizeRootObjectToView);
    ui->map_1->setSource(QUrl("qrc:/A.qml"));
    ui->map_1->show();

}

second::~second()
{
    delete ui;
}


void second::on_label_1_clicked()
{

    MainWindow *fater = new MainWindow();
    this->close();
    fater->show();


}

代码好多都是东拼西凑的，项目时间真的很赶，而且我只是一个苦逼大学生T.T，要学的东西太多了。

                             5.虽然过程很艰辛，但是做出来的那一刻真的很开心！！！来吧展示！

地图

3