在今天的文章中,我们将介绍如何利用Map API来展示如何显示我们的坐标信息,并展示如何在地图上标记我们的位置.我可以通过这个简单的应用显示在我们手机中所支持的Plugin的Providers(提供者).同时,我们也可以列出目前所支持的所有的MapType,并通过选择它们来展示我们的结果.
1)显示我们所有的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的原因).在国外,应该可以使用Nokia
Here地图的.
2)如何在地图中标注
简单地,我们可以使用
MapCircle:
MapCircle {
center: me.position.coordinate
radius: units.gu(3)
color: "red"
}
我们可以
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
}
}
我们可以在代码中动态地生产我们需要的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来添加进去.当我们点击地图时,我们把标注加入到地图中去:
我们可以获得任何一个地点的位置信息.这在中国的手机地图中是得不到这个信息的:)
3)如何通过手势操作放大/缩小/移动地图
在默认的情况下,我们可以直接通过手势的操作来进行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.
4)如何获得所有的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"来列表所有的被支持的地图形式.最终在我们的应用中:
5)如何获得当前位置的位置信息
我们可以通过
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);
}
}
整个项目的源码在:
https://github.com/liu-xiao-guo/gps