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

原创 2016年06月02日 13:36:31

在今天的文章中,我们将介绍如何利用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的原因).在国外,应该可以使用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




版权声明:本文为博主原创文章,未经博主允许不得转载。

谷歌地图添加文本标注

实现方式如下:    MarkerWithLabel Example      .labels {      color: red;      background-col...
  • songsongmianbao
  • songsongmianbao
  • 2016年03月04日 09:51
  • 1434

google map api v3实现将多个标注展示在最佳视野

由于最近在做一个要切换百度地图和谷歌地图的双地图应用,一开始做的是百度地图,要...
  • daizi_xiao
  • daizi_xiao
  • 2014年07月09日 17:00
  • 1863

goole map v3 API 在线、离线开发、实现多标注显示、模仿多地址查询显示

最近开发过程中涉及到了谷歌地图,在网上找了很多资料这才实现了多功能的谷歌地图开发应用:     下载地址是:GoogleMapAPIV3.zip   使用离线版本后,只需要加载mapapi...
  • ht_gaogao
  • ht_gaogao
  • 2013年06月17日 22:29
  • 2091

调用百度地图api实现标记城市

正在做的项目 正在做的项目用到了地图标记城市的功能,用了百度地图的sdk来实现,写篇博客把实现过程记录下。 下载sdk,工程配置,申请秘钥等基础步骤,开发人员可根据百度提供的开发指南一步一步操...
  • sep_15th
  • sep_15th
  • 2014年08月04日 11:21
  • 1381

关于运用高德地图api,并在api上显示标注的小应用

关于高德地图api的一点小应用
  • u011768325
  • u011768325
  • 2014年12月22日 14:08
  • 2455

使用百度地图API实现地图生成、标记以及标注

使用百度地图JavaScript API实现地图的生成、标记以及标注
  • qq_35042227
  • qq_35042227
  • 2017年11月29日 19:07
  • 90

百度地图api为标注设置与删除文字标签

因项目的需求需要用的百度地图,发现为标注Marker设置文字标签时,只有标签Label的设置与获取,而并没有移除功能,百度后也没有的到可行方法,然后研究一种变通点的方法也实现标签的设置与删除,和大家分...
  • u010847813
  • u010847813
  • 2016年04月21日 20:33
  • 4893

百度地图API (1):往地图中添加标注点

1.实现功能:通过给定的坐标点,往地图中添加标注点,点击标注点,显示改点的详细信息。 2.效果图: 3.核心方法: 手动创建数据,实际项目则是接受GPS信息 //新建三个地图上点 var po...
  • c1481118216
  • c1481118216
  • 2016年09月11日 11:50
  • 9786

百度地图添加标记以及标记的点击

废话少说,直接上代码: MapActivity.javapackage com.wissea.trs.activity;import java.util.ArrayList; import java...
  • ithouse
  • ithouse
  • 2015年05月22日 16:26
  • 3097

百度地图demo-不显示地图

写这篇博文主要是自己现在要做地图方面的应用。选择了百度地图,从官网上下载demo想在手机上演示。结果程序运行到手机上后却始终没有显示出来地图。之前一直以为是百度自己的BUG但是更新到最新的2.9.1后...
  • u012470558
  • u012470558
  • 2015年11月21日 09:27
  • 3204
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在Ubuntu手机上利用Map API来显示地图并动态显示标记
举报原因:
原因补充:

(最多只允许输入30个字)