QML代码报‘Expected token ;’错误，如何解决？

运行Qt地图应用时出现如下编译错误：

/home/babloo/Qt_workspace/MapDemo/main.qml:21: error: Expected token `;'

相关代码文件： #

main.qml

import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtLocation 5.12
import QtPositioning 5.12
import OsmDataParser 1.0

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    OsmDataParser {
        id: osmParser

        onOsmDataLoaded: {
            // Use the parsed coordinates to create map elements (e.g., markers)
            for (var i = 0; i < coordinates.length; i++) {
                var coordinate = coordinates[i];
                // Create MapQuickItem and assign it to a variable
                var marker = MapQuickItem {
                    coordinate: QtPositioning.coordinate(coordinate.latitude, coordinate.longitude)
                    sourceItem: Item {
                        width: 32
                        height: 32
                        Image {
                            source: "marker.png" // Your custom marker image
                        }
                    }
                };

                // Add the MapQuickItem to the map
                map.addMapItem(marker);
            }
        }
    }

    // Create a Map with OpenStreetMap as the map provider
    Map {
        id: map
        anchors.fill: parent
        plugin: Plugin { name: "osm" }
    }

    PositionSource {
        active: true
        onPositionChanged: {
            // Center the map on the user's location (optional)
            map.center = position.coordinate;
        }
    }

    Component.onCompleted: {
        // Load and parse the OSM XML data file
        osmParser.parseOsmXml("india_osm.xml"); // Replace with your XML file path
    }
}

main.cpp

#include <QtQml>
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "qosmdataparser.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    qmlRegisterType<OsmDataParser>("OsmDataParser", 1, 0, "OsmDataParser");

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

qosmdataparser.h

#ifndef OSMDATAPARSER_H
#define OSMDATAPARSER_H

#include <QObject>
#include <QQmlApplicationEngine>
#include <QFile>
#include <QXmlStreamReader>
#include <QGeoCoordinate>
#include <QList>

class OsmDataParser : public QObject
{
    Q_OBJECT

public:
    explicit OsmDataParser(QObject* parent = nullptr);

    Q_INVOKABLE void parseOsmXml(const QString& xmlFilePath);

signals:
    void osmDataLoaded(const QList<QGeoCoordinate>& coordinates);

private:
    QList<QGeoCoordinate> coordinateList;
};

#endif // OSMDATAPARSER_H

qosmdataparser.cpp

#include "qosmdataparser.h"

OsmDataParser::OsmDataParser(QObject* parent)
    : QObject(parent)
{
}

void OsmDataParser::parseOsmXml(const QString& xmlFilePath)
{
    QFile file(xmlFilePath);
    if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
    {
        // Handle file open error
        return;
    }

    QXmlStreamReader xmlReader(&file);

    while (!xmlReader.atEnd())
    {
        xmlReader.readNext();
        if (xmlReader.isStartElement() && xmlReader.name() == "node")
        {
            double lat = xmlReader.attributes().value("lat").toDouble();
            double lon = xmlReader.attributes().value("lon").toDouble();
            QGeoCoordinate coordinate(lat, lon);
            coordinateList.append(coordinate);
        }
    }

    if (xmlReader.hasError())
    {
        // Handle XML parsing error
        return;
    }

    emit osmDataLoaded(coordinateList);
}

错误原因及解决办法 #

错误出在main.qml的第21行：在JavaScript代码块（onOsmDataLoaded函数体）中，直接用QML声明式语法MapQuickItem {}创建组件并赋值给变量，这不符合QML中JavaScript的语法规则——JS上下文里不允许直接这样声明QML组件实例。

以下是两种可行的解决方式：

方式一：预定义Component，用createObject创建实例

先定义封装Marker结构的Component，再在JS中动态创建实例：

import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtLocation 5.12
import QtPositioning 5.12
import OsmDataParser 1.0

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    // 预定义Marker组件模板
    Component {
        id: markerComponent
        MapQuickItem {
            coordinate: QtPositioning.coordinate(0, 0)
            sourceItem: Item {
                width: 32
                height: 32
                Image {
                    source: "marker.png"
                }
            }
        }
    }

    OsmDataParser {
        id: osmParser

        onOsmDataLoaded: {
            for (var i = 0; i < coordinates.length; i++) {
                var coord = coordinates[i];
                // 基于Component创建实例，传入坐标参数
                var marker = markerComponent.createObject(map, {
                    "coordinate": QtPositioning.coordinate(coord.latitude, coord.longitude)
                });
                if (marker) {
                    map.addMapItem(marker);
                }
            }
        }
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: Plugin { name: "osm" }
    }

    PositionSource {
        active: true
        onPositionChanged: {
            map.center = position.coordinate;
        }
    }

    Component.onCompleted: {
        osmParser.parseOsmXml("india_osm.xml");
    }
}

方式二：用Qt.createQmlObject动态创建组件

无需预定义Component，直接在JS中生成QML代码创建实例：
修改onOsmDataLoaded部分代码：

onOsmDataLoaded: {
    for (var i = 0; i < coordinates.length; i++) {
        var coord = coordinates[i];
        var markerQml = `
            import QtLocation 5.12
            import QtPositioning 5.12
            MapQuickItem {
                coordinate: QtPositioning.coordinate(${coord.latitude}, ${coord.longitude})
                sourceItem: Item {
                    width: 32
                    height: 32
                    Image {
                        source: "marker.png"
                    }
                }
            }
        `;
        var marker = Qt.createQmlObject(markerQml, map);
        if (marker) {
            map.addMapItem(marker);
        }
    }
}

额外注意事项 #

1. 确保marker.png文件存在于项目资源或可访问路径中，否则标记会显示为空。
2. 检查OsmDataParser的osmDataLoaded信号传递的coordinates列表是否有效，避免空列表或无效坐标。
3. 动态创建组件时，要处理创建失败的情况（比如createObject返回null），避免后续报错。

内容的提问来源于stack exchange，提问作者Babloo Kumar