如何在Ubuntu手机中利用百度地图显示一个坐标位置

100 阅读1分钟

地图在我们的生活中扮演非常重要的角色.我们可以利用Ubuntu手机中提供的位置服务得到位置信息并显示自己的位置在百度地图上.在显示位置信息时,我们必须记住一点,我们必须要进行必要的坐标转换,否则我们所显示的地图信息不是精确的.具体更多的信息可以访问"坐标转换API Web服务API".

\

下面我们来通过一个例程来显示如何进行坐标转换,并显示正确的地图信息.

\

Main.qml

\

import QtQuick 2.4
import Ubuntu.Components 1.3
import "WebApi.js" as API
import QtPositioning 5.0

MainView {
    id:  mainScreen

    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "baidumap.liu-xiao-guo"

    property string longitude: "116.3883"
    property string latitude: "39.9289"

    width: units.gu(60)
    height: units.gu(85)

    PositionSource {
        id: me
        active: true
        updateInterval: 1000
        preferredPositioningMethods: PositionSource.AllPositioningMethods
        onPositionChanged: {
            console.log("latitude: " + position.coordinate.latitude + " longitude: " +
                        position.coordinate.longitude);
            console.log(position.coordinate)

            mainScreen.longitude = position.coordinate.longitude;
            mainScreen.latitude = position.coordinate.latitude;

            before.source = API.getStaticMap(longitude, latitude)

            // Do the conversion here
            API.convertCoordinates(longitude, latitude, gotConverted)
        }

        onSourceErrorChanged: {
            console.log("Source error: " + sourceError);
        }
    }


    function gotConverted(o) {
        after.source = API.getStaticMap(o.longitude, o.latitude)
    }

    Page {
        title: i18n.tr("baidumap")

        Column {
            anchors.fill: parent
            spacing: units.gu(2)

            Image {
                id: before
                width: parent.width
                height: parent.height/2                

                Label {
                    text: "Before conversion"
                    fontSize: "large"
                }
            }

            Image {
                id: after
                width: parent.width
                height: parent.height/2

                Label {
                    text: "After conversion"
                    fontSize: "large"
                }
            }
        }
    }
}

\

在上面的代码中,我们使用:

\

    PositionSource {
        id: me
        active: true
        updateInterval: 1000
        preferredPositioningMethods: PositionSource.AllPositioningMethods
        onPositionChanged: {
            console.log("latitude: " + position.coordinate.latitude + " longitude: " +
                        position.coordinate.longitude);
            console.log(position.coordinate)

            mainScreen.longitude = position.coordinate.longitude;
            mainScreen.latitude = position.coordinate.latitude;

            before.source = API.getStaticMap(longitude, latitude)

            // Do the conversion here
            API.convertCoordinates(longitude, latitude, gotConverted)
        }

        onSourceErrorChanged: {
            console.log("Source error: " + sourceError);
        }
    }

\

来得到我们的当前的位置信息:经度,维度.我们可以通过百度的staticmap API接口进行显示地图信息.
在上面的代码中,我们显示两个图片,一个是没有经过转换的图片,另外一个是经过坐标转换后的地图图片.经过比对,我们会发现,经过转换过的地图信息更贴近我们的实际的位置.

运行我们的项目:

\

\

\

不怕大家知道,上面显示的正是我家的地址.非常精确.

整个项目的源码在: github.com/liu-xiao-gu…


\