消息关闭
    暂无新消息!
各位大神,小弟是个新手,目前在用qml开发一款app,app运行的平台是ios,需要使用到高德地图的搜索和定位功能,在看了高德地图开发指南后,想着qml和js是兼容的,想用JavaScript API来做开发,可是高德地图申请的KEY值需用用html语言来引入,这个就让我头疼了,qml好像不好和html混编吧,而且我地图的实现代码要写在 .js 的文件中,里面也没法使用html标签,各位大神谁能帮我支个招,我用qml怎么开发高德地图呢?感激不尽!!!!!

2个回答

︿ 2
web服务的静态地图API我试成功了,API在这里。
https://lbs.amap.com/api/webservice/guide/api/staticmaps

前面说的qml的XMLHttpRequest发请求,然后接收到的图片流不好处理(XMLHttpRequest.responseText始终无法正确地保存成png,应该是字符编码/换行符的问题),我改用QNetworkAccessManager了。

原理就是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) {
        mPixmap = QPixmap(800, 600);
        mPixmap.fill(QColor("red"));
    }

    virtual QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override {
        return mPixmap;
    }
    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);

    MapProvider * getProvider();
    Q_INVOKABLE void get(QUrl url);
signals:
    void replayReady();
public slots:
    void replaySlot(QNetworkReply *reply);
private:
    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)
{
    mManager->get(QNetworkRequest(QUrl(url)));
}

void Map::replaySlot(QNetworkReply *reply)
{
    mMapProvider->setData(reply->readAll());
    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;
    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);
        }
    }
}
︿ 2
正在研究这个问题,qml可以用XMLHttpRequest发http请求,但是现在遇到的问题是,拿到的请求结果是图片流,不能直接显示,需要用C++写一个QQuickImageProvider。
先贴段qml的代码
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"
    Component.onCompleted: {
        var xhr = new XMLHttpRequest;
        xhr.onreadystatechange=function() {
            if (xhr.readyState === xhr.DONE) {
                //这里拿到的是服务器发过来的图片流,并不能直接给Image,需要做转换
                console.log(xhr.responseText.toString())
            }
        }
        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;
        xhr.open("GET",url);
        xhr.send();
    }
    Image {
        id: image
        width: 800
        height: 600
        anchors.centerIn: parent
    }
}