QML Map

一直想做地图，找不到资料，尤其是C++的，今天已经读到gpx文件的经纬度了，下一步要画在地图上了。
https://blog.csdn.net/gongjianbo1992/article/details/103624656
qmlscene main.qml 报错： 

Extra characters after test expression.

放在Qt工程里用 QQmlApplicationEngine 加载成功
加入全局变量，替代固定的经纬度，只需要改这2个值就可以定位到自己所在的城市了。
property double lat : 26.9
property double lon : 112.6

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtPositioning 5.2
import QtLocation 5.2
 
Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("地图")
    property double lat : 26.9
    property double lon : 112.6
 
    Slider{
        id: bearing_slider
        height: 20
        width: parent.width
        from: 0
        to: 360
        value: 0
    }
    
    //拖动窗口大小图元位置不能实时跟随，做此下策
    onWidthChanged: item_map.zoomLevel += 0.000001
    onHeightChanged: item_map.zoomLevel -= 0.000001
 
    //绘制地图的容器
    Map {
        id: item_map
        anchors.fill: parent
        anchors.topMargin: 20
 
        plugin: Plugin {
            //参见文档https://doc.qt.io/qt-5.12/qml-qtlocation-plugin.html
 
            //首选插件语言环境的有序列表,但是貌似没啥用
            locales: "zh-CN"
 
            //插件的名称
            //osm需要把openssl的dll放到运行目录
            //esri默认就能用,mapbox的我这里加载不了,here的不知道咋用
            //esri默认这个图成都那里不对（放大后）
            name: "esri" // "mapboxgl", "esri", "osm"...
 
            //首选插件名称的有序列表,设置了name值时无效
            //preferred: ["here","osm"]
 
            //选择附加到哪个服务插件时Plugin对象所需的功能集,设置了name值时无效
            //required: Plugin.AnyMappingFeatures | Plugin.AnyGeocodingFeatures
        }
 
        //初始中心点
        center: QtPositioning.coordinate(lat, lon)
        //初始缩放等级
        zoomLevel: 12
        //最大缩放等级
        maximumZoomLevel: 14
        //最小缩放等级
        minimumZoomLevel: 1
        //背景色，没有正常加载时显色的图块颜色
        color: "white"
        //地图的方位
        //如果用于Map的插件支持方位，则该值的有效范围在0到360之间。
        //如果用于Map的插件不支持方位，则更改此属性将无效。
        bearing: bearing_slider.value
 
        //在地图上显示任意Qt Quick对象
        MapQuickItem {
            id: point_1
            //缩放等级默认0固定大小，否则会和缩放等级一起放大缩小
            zoomLevel: 0
            //指示的坐标点
            coordinate: QtPositioning.coordinate(lat-0.02, lon-0.01)
            //sourceItem左上角相对于coordinate的偏移
            anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
            //Qt Quick对象
            sourceItem: Rectangle {
                width: 14
                height: 14
                radius: 7
                color: "green"
                border.color: "red"
                border.width: 1
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log("click")
                }
                //coordinate类型有经纬度高度三个属性
                //latitude 纬度
                //longitude 经度
                //altitude 海拔高度，单位米
                //以及计算距离和方位角的方法
                //这里用文本显示两个点的距离
                Text {
                    text: Math.round(point_1.coordinate.distanceTo(point_2.coordinate))/1000 + " km"
                    color: "green"
                    font.bold: true
                    font.pixelSize: 16
                }
            }
            //Qt5.14加了一个淡入属性autoFadeIn
        }
 
        MapQuickItem {
            id: point_2
            //zoomLevel: 10 //和缩放等级一起放大缩小
            coordinate: QtPositioning.coordinate(lat - 0.01, lon - 0.02)
            anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
            sourceItem: Rectangle {
                width: 14
                height: 14
                radius: 7
                color: "green"
                border.color: "red"
                border.width: 1
            }
        }
 
        //此外，还有MapCircle，MapRectangle，MapPolygon等图元类型
        //他们是和地图成比例的
        // 画多边形
        MapPolygon {
            id: point_3
            color: "blue"
            border.width: 1
            border.color: "red"
            //根据坐标点绘制多边形
            path: [QtPositioning.coordinate(lat, lon)]
            Component.onCompleted: {
                point_3.addCoordinate(QtPositioning.coordinate(lat + 0.02, lon))
                point_3.addCoordinate(QtPositioning.coordinate(lat + 0.02, lon + 0.02))
                point_3.addCoordinate(QtPositioning.coordinate(lat - 0.01, lon + 0.04))
            }
        }
 
        // 绘制折线
        MapPolyline {
            line.width: 2
            line.color: "green"
            //路径列表 path : list<coordinate>
            path: [point_1.coordinate, point_2.coordinate, point_3.path[0]]
        }

        //文字信息
        Rectangle {
            x: 10
            y: 10
            height: item_center.height + 20
            width: item_center.width + 20
            color: "green"
            Text{
                id: item_center
                x: 10
                y: 10
                color: "white"
                font.pixelSize: 16
                font.bold: true
                //展示缩放等级 和 map的中心点经纬度
                text: "zoom level:" + Math.floor(item_map.zoomLevel) +
                      " center:" + item_map.center.latitude +
                      "  " + item_map.center.longitude
            }
        }
    }
}

不知道有没有卫星图。