QT6 调用高德地图API创建地图（初学者级），重点解决了简单代码中的AMap is not defined 问题。

刚刚学习QT软件，由于本身专业是需要用到地图的，所以尝试用QT的窗口调用地图API。

总体步骤分为QT项目创建、UI布局简单设置、代码创建、HTML获取和API key获取、解决AMap is not defined 问题。

1.QT项目创建

1.1 基本类这里要选择QWidget类

1.2构建套件这里要选择MSVC（因为好像只有visual studio支持webenginewidgets模块）

2.UI布局简单设置

2.1 QT6版本中选择widget控件

2.2  右键点击功能选择中选择“提升为”，将其提升为QWebEngineView类

3. 代码书写

这里直接放入代码。

项目结构

240505.pro

QT       += core gui webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
CONFIG += c++17

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    widget.cpp

HEADERS += \
    widget.h

FORMS += \
    widget.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

widget.h

#ifndef WIDGET_H
#define WIDGET_H
#include <QtWidgets>
#include <QWebEngineView>
#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

main.cpp

#include "widget.h"

#include <QApplication>

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

    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}

widget.cpp

#include "widget.h"
#include "ui_widget.h"


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

    ui->setupUi(this);
    ui->web_widget->setUrl(QUrl("http://localhost:8000/高德创建地图API.html"));
}

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

widget.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QWebEngineView" name="web_widget" native="true"/>
   </item>
  </layout>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QWebEngineView</class>
   <extends>QWidget</extends>
   <header>qwebengineview.h</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

4.HTML获取和API key获取

4.1 HTML获取

百度搜索高德API，进入后注册登录，点击菜单栏中的“文档与支持”然后点击其中的JS API。

点击右边栏中的示例中心。

选择最基础的地图创建，然后获取右边HTML代码栏中的代码即可。

4.2 高德地图API获取

注册登陆后，选择菜单栏中的控制台，点击应用管理，添加应用，注意选择web端，即可获取key，放入html中使用即可。

5. 解决AMap is not defined问题

由于我是初初初学者，所以直接在代码中引用了自己的html的本地文件，这个报错的原因是API脚本没有正确加载，因为我尝试在在本地文件系统中打开HTML文件（即使用file://协议），而不是通过HTTP服务器。这是不安全的，因此不可以这样调用。

解决方法是使用python -m http.server（来快速启动一个HTTP服务器）。然后进行调用API

主要是在widegt.cpp中出现错误代码，本人错误代码如下，直接调用本地html文件。

#include "widget.h"
#include "ui_widget.h"


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

    ui->setupUi(this);
    ui->web_widget->setUrl(QUrl("D:/QTproject/24050511/html/gaode.html"));
}

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

首先将widget.cpp中的代码更改如下

#include "widget.h"
#include "ui_widget.h"


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

    ui->setupUi(this);
    ui->web_widget->setUrl(QUrl("http://localhost:8000/高德创建地图API.html"));
}

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

现在创建一个https服务器。首先按win+R打开运行对话框，输入cmd进入命令行，跳转到自己html文件所在的文件夹下，例如我的html文件是在“D:\QTproject\24050511\html”文件夹下的。

然后输入 python -m http.server 8000  命令，就创建成功了（不使用的时候按ctrl+c关闭服务器）

然后回到QT界面，命令行不用管他，放着即可，直接运行代码，这时候就运行成功了。

运行界面如下。