在Ubuntu手机上利用Map API来显示地图并动态显示标记
2016-06-02 13:36
447 查看
在今天的文章中,我们将介绍如何利用Map API来展示如何显示我们的坐标信息,并展示如何在地图上标记我们的位置.我可以通过这个简单的应用显示在我们手机中所支持的Plugin的Providers(提供者).同时,我们也可以列出目前所支持的所有的MapType,并通过选择它们来展示我们的结果.
来获取,我们目前所支持的所有的plugin.目前在我们的MX4手机上所展示的Providers:
就像上面的图中显示的那样,我们可以发现"nokia"及"osm"两个service providers.目前的情况是在中国"nokia"是用不了的(这可能是由于license的原因).在国外,应该可以使用NokiaHere地图的.
在我们的地图中用一个全来标注我们所感兴趣的点.在这里,"center"用来表示圆圈的中心坐标位置.
我们可以MapQuickItem来用任何一个Item来标注我们的兴趣点.在我们的例程中,我们使用了如下的方法:
我们使用了一个圆点及一个可以显示坐标的Label.
我们可以在代码中动态地生产我们需要的QML Component并标注我们的位置信息:
在上面我们通过Qt.createQmlObject来动态地创建一个MapCirle的控件.我们通过map.addMapItem来添加进去.当我们点击地图时,我们把标注加入到地图中去:
我们可以获得任何一个地点的位置信息.这在中国的手机地图中是得不到这个信息的:)
当我们的enabled项设为false时,我们可以进行任何的zoom或pan.
在这里,我们使用了"map.supportedMapTypes"来列表所有的被支持的地图形式.最终在我们的应用中:
我们可以通过设置updateInterval来得到获取位置的频率.
整个项目的源码在:https://github.com/liu-xiao-guo/gps
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的原因).在国外,应该可以使用NokiaHere地图的.
2)如何在地图中标注
简单地,我们可以使用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来添加进去.当我们点击地图时,我们把标注加入到地图中去:
我们可以获得任何一个地点的位置信息.这在中国的手机地图中是得不到这个信息的:)
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); } }
我们可以通过设置updateInterval来得到获取位置的频率.
整个项目的源码在:https://github.com/liu-xiao-guo/gps
相关文章推荐
- linux驱动insmod时出现killed
- HBASE的安装
- IOS设计模式之三(适配器模式,观察者模式)
- 排序算法(二):选择排序
- vim 多行注释
- Implementing High Performance Parsers in Java
- iOS_直播类app_HTTP Live Streaming
- 用户添加页面搭建(niceValidate表单验证、ajax手机号异步验证)
- android6.0通话模块涉及工程
- OpenLayers 3 之 添加地图网格
- ElasticSearch 自定义排序处理
- OrCAD16.6和PADS9.5交互
- 程序员修炼之道 笔记与感想
- 摇一摇手机控制手机录音功能
- Android通知Notification的使用
- 买哈利波特书算法
- 抽象类和接口的区别——从java的设计意图说起
- 深入理解Java的接口和抽象类
- Git笔记
- HTML5