在Ubuntu手机上利用Map API来显示地图并动态显示标记

来源：互联网发布：乐视max2root软件编辑：程序博客网时间：2024/06/01 09:04

在今天的文章中，我们将介绍如何利用Map API来展示如何显示我们的坐标信息，并展示如何在地图上标记我们的位置．我可以通过这个简单的应用显示在我们手机中所支持的Plugin的Providers（提供者）．同时，我们也可以列出目前所支持的所有的MapType，并通过选择它们来展示我们的结果．

１）显示我们所有的Plugin的Service Providers

我们可以通过Plugin的API接口：

    Plugin {        id: plugin        // Set the default one        Component.onCompleted: {            name = availableServiceProviders[0]        }    }

来获取，我们目前所支持的所有的plugin．目前在我们的MX4手机上所展示的Providers:

就像上面的图中显示的那样，我们可以发现＂nokia＂及＂osm＂两个service providers．目前的情况是在中国＂nokia＂是用不了的（这可能是由于license的原因）．在国外，应该可以使用NokiaHere地图的．

２）如何在地图中标注

简单地，我们可以使用MapCircle：

MapCircle {    center: me.position.coordinate    radius: units.gu(3)    color: "red"}

在我们的地图中用一个全来标注我们所感兴趣的点．在这里，＂center＂用来表示圆圈的中心坐标位置．

我们可以MapQuickItem来用任何一个Item来标注我们的兴趣点．在我们的例程中，我们使用了如下的方法：

                    MapQuickItem {                        id: mylocation                        sourceItem: Item {                            width: units.gu(6)                            height: info.height                            Label {                                id: info                                anchors.centerIn: parent                                anchors.verticalCenterOffset: -units.gu(2)                                text: "(" + me.position.coordinate.longitude.toFixed(2) + "," + me.position.coordinate.latitude.toFixed(2) + ")"                                color: "blue"                            }                            Rectangle {                                width: units.gu(2)                                height: width                                radius: width/2                                color: "red"                                x: parent.width/2                                y: parent.height/2                            }                        }

我们使用了一个圆点及一个可以显示坐标的Label.

我们可以在代码中动态地生产我们需要的QML Component并标注我们的位置信息：

           MouseArea {                        anchors.fill: parent                        onPressed: {                            if ( setMarks.checked ===false ) {                                mouse.accepted = false                                return;                            }                            console.log("mouse: " + mouseX + " " + mouseY)                            var coord = map.toCoordinate(Qt.point(mouseX, mouseY))                            console.log("creating the component")                            var component = Qt.createComponent("MapMarkItem.qml")                            console.log("creating the item")                            var item = component.createObject(map, { coordinate: coord })                            console.log("adding the item")                            map.addMapItem(item)//                            var circle = Qt.createQmlObject('import QtLocation 5.3; MapCircle {}', map)//                            circle.center = coord//                            circle.radius = units.gu(4)//                            circle.color = 'green'//                            circle.border.width = 3//                            map.addMapItem(circle)                            mouse.accepted = true;                        }                    }

在上面我们通过Qt.createQmlObject来动态地创建一个MapCirle的控件．我们通过map.addMapItem来添加进去．当我们点击地图时，我们把标注加入到地图中去：

我们可以获得任何一个地点的位置信息．这在中国的手机地图中是得不到这个信息的：）

３）如何通过手势操作放大／缩小／移动地图

在默认的情况下，我们可以直接通过手势的操作来进行Zoom及Pan我们的地图．我们也可以定义我们自己的gesture来启动或禁止这个手势的操控：

                    gesture {                        enabled: !setMarks.checked                        activeGestures: MapGestureArea.ZoomGesture | MapGestureArea.PanGesture                        onPanStarted:  {                            console.log("onPanStarted")                        }                        onPanFinished: {                            console.log("onPanFinished")                        }                        onPinchStarted: {                            console.log("onPinchStarted")                        }                        onPinchFinished: {                            console.log("onPinchFinished")                        }                        onPinchUpdated: {                            console.log("onPinchUpdated")                            console.log("point1: " + "(" + pinch.point1.x + pinch.point1.y + ")")                        }                    }

当我们的enabled项设为false时，我们可以进行任何的zoom或pan．

４）如何获得所有的MapType

我们可以通过设置Map的MapType来查看卫星，夜间，地形图等信息．我们可以通过如下的API来列表所有的MapType:

            leadingActionBar {                id: leadbar                actions: {                    var supported = map.supportedMapTypes;                    console.log("count: " + supported.length)                    var acts = []                    console.log("Going to add the types")                    for ( var i = 0; i < supported.length; i++ ) {                        var item = supported[i]                        console.log("map type name: " + item.name)                        console.log("map style: " + item.style)                        console.log("type des:" + item.description)                        var action = creatAction(leadbar, "info", item)                        acts.push(action)                    }                    return acts                }            }

在这里，我们使用了＂map.supportedMapTypes＂来列表所有的被支持的地图形式．最终在我们的应用中：

５）如何获得当前位置的位置信息

我们可以通过PositionSource接口获取我们的当前的位置信息：

    PositionSource {        id: me        active: true        updateInterval: 1000        preferredPositioningMethods: PositionSource.AllPositioningMethods        onPositionChanged: {            console.log("lat: " + position.coordinate.latitude + " longitude: " +                        position.coordinate.longitude);            console.log(position.coordinate)            console.log("mapzoom level: " + map.zoomLevel)        }        onSourceErrorChanged: {            console.log("Source error: " + sourceError);        }    }

我们可以通过设置updateInterval来得到获取位置的频率．

整个项目的源码在：https://github.com/liu-xiao-guo/gps

0 0