高德地圖提供了很多Web API，本文展示如何使用Qt + qml 獲取靜態地圖

效果圖：

原理：
QNetworkAccessManager通過get方法傳送一個URL請求出去，高德的伺服器接收到這個請求，會把對應的圖片以流的方式回覆給你，你接收到資料後，把資料放到一個QQuickImageProvider裡面，然後讓qml獲取這個QQuickImageProvider的圖片就好了。

下面貼程式碼：

MapProvider.hpp

#pragma once

#include <QFile>
#include <QDebug>
#include <QQuickImageProvider>
 

class MapProvider : public QQuickImageProvider {
public:
    MapProvider()
        : QQuickImageProvider(QQuickImageProvider::Pixmap) {
        //pixmap 初始化為800 x 600 的紅色圖片
        mPixmap = QPixmap(800, 600);
        mPixmap.fill(QColor("red"));
    }
     //過載， qml就是通過這個函式得到的圖片
    virtual QPixmap requestPixmap(const
 
 QString &id, QSize *size, const QSize &requestedSize) override {
        return mPixmap;
    }
    //將資料設定到pixmap中
    void setData(QByteArray data) {
        mPixmap.loadFromData(data);
    }
private:
    QPixmap mPixmap;
};

Map.hpp

#pragma once

#include <memory>
#include <cstdlib>
 

#include <functional>

#include <QUrl>
#include <QObject>
#include <QNetworkReply>
#include <QNetworkRequest>
#include <QNetworkAccessManager>

#include "MapProvider.hpp"

class Map : public QObject
{
    Q_OBJECT
public:
    explicit Map(QObject *parent = nullptr);
     //獲取 provider
    MapProvider * getProvider();
    //INVOKABLE 開放給qml，用來發起GET 請求
    Q_INVOKABLE void get(QUrl url);
signals:
    void replayReady();
public slots:
    void replaySlot(QNetworkReply *reply);
private:
    //C++ std 風格的智慧指標
    std::shared_ptr<QNetworkAccessManager> mManager;
    std::shared_ptr<MapProvider> mMapProvider;
};

Map.cpp

#include "Map.hpp"

Map::Map(QObject *parent) : QObject(parent)
{
    //指標初始化
    mManager = std::make_shared<QNetworkAccessManager>();
    mMapProvider = std::make_shared<MapProvider>();
    //連線訊號 槽
    connect(mManager.get(), &QNetworkAccessManager::finished, this, &Map::replaySlot);
}

MapProvider *Map::getProvider()
{
    return mMapProvider.get();
}

void Map::get(QUrl url)
{
    //GET 請求
    mManager->get(QNetworkRequest(QUrl(url)));
}
// GET請求的響應處理 
void Map::replaySlot(QNetworkReply *reply)
{
    //讀取全部資料，寫入provider
    mMapProvider->setData(reply->readAll());
    //通知qml，重新整理圖片
    emit replayReady();
}

Main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
#include <QQmlContext>
#include <QQmlEngine>
#include "Map.hpp"
#include "MapProvider.hpp"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    Map map;
    //新增Provider，注意字串中的大小寫，qml中使用要一致
    view.engine()->addImageProvider(QLatin1String("Provider"), map.getProvider());
    view.engine()->rootContext()->setContextProperty("IMap", &map);
    view.setSource(QUrl("qrc:/Qml/Main.qml"));
    view.show();

    return app.exec();
}

Main.qml (注意把key換掉，我的key就不貼出來了)

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item {
    visible: true
    width: 1024
    height: 768

    readonly property var key : "此處寫上你的key"

    Connections {
        target: IMap
        onReplayReady: {
            image.source = "image://Provider";
        }
    }
    Image {
        id: image
        width: 800
        height: 600
        anchors.centerIn: parent

        Component.onCompleted: {
            var url = "http://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=800*600&markers=mid,,A:116.481485,39.990464&key=" + key;
            IMap.get(url);
        }
    }
}