利用Ubuntu SDK提供的GeocodeModel接口来进行地理标注

我们可以利用Ubuntu SDK中的GeocodeModel来在进行地理编码．比如说，我们给出一个地名，通过GeocodeModel来查询该地理位置的具体的信息，比如经度维度，街道信息等．在今天的文章中，我们通过一个简单的例程来展示如何查询一个地点．

就像我们的API文档中介绍的那样：

GeocodeModel {
id: geocodeModel
plugin: plugin
autoUpdate: false

onStatusChanged: {
mymodel.clear()
console.log("onStatusChanged")
if ( status == GeocodeModel.Ready ) {
var count = geocodeModel.count
console.log("count: " + geocodeModel.count)
for ( var i = 0; i < count; i ++ ) {
var location = geocodeModel.get(i);
mymodel.append( {"location": location})
}
}
}

onLocationsChanged: {
console.log("onStatusChanged")
}

Component.onCompleted: {
query = "中国 北京 朝阳 望京"
update()
}
}在上面的代码中，当我们的GeocodeModel被装载后，我们发送一个查询的请求：
query = "中国 北京 朝阳 望京"
update()当这个请求有结果回来后，在我们的onStatusChanged中返回我们所需要的结果．我们可以通过列表的方式显示我们所需要的结果．我们所有的代码为：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3
import QtLocation 5.3
import QtPositioning 5.2

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

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

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

Plugin {
id: plugin
name: "osm"
}

ListModel {
id: mymodel
}

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)
map.coordinate = position.coordinate
}

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

GeocodeModel {
id: geocodeModel
plugin: plugin
autoUpdate: false

onStatusChanged: {
mymodel.clear()
console.log("onStatusChanged")
if ( status == GeocodeModel.Ready ) {
var count = geocodeModel.count
console.log("count: " + geocodeModel.count)
for ( var i = 0; i < count; i ++ ) {
var location = geocodeModel.get(i);
mymodel.append( {"location": location})
}
}
}

onLocationsChanged: {
console.log("onStatusChanged")
}

Component.onCompleted: {
query = "中国 北京 朝阳 望京"
update()
}
}

Page {
id: page
header: standardHeader

PageHeader {
id: standardHeader
visible: page.header === standardHeader
title: "Geocoding"
trailingActionBar.actions: [
Action {
iconName: "edit"
text: "Edit"
onTriggered: page.header = editHeader
}
]
}

PageHeader {
id: editHeader
visible: page.header === editHeader
leadingActionBar.actions: [
Action {
iconName: "back"
text: "Back"
onTriggered: {
page.header = standardHeader
}
}
]
contents: TextField {
id: input
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
placeholderText: "input words .."
text: "中国 北京 朝阳 望京"

onAccepted: {
geocodeModel.query = text
geocodeModel.update()
}
}
}

Item  {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
top: page.header.bottom
}

Column {
anchors.fill: parent

ListView {
id: listview
clip: true
width: parent.width
height: parent.height/3
opacity: 0.5
model: mymodel
delegate: Item {
id: delegate
width: listview.width
height: layout.childrenRect.height + units.gu(0.5)

Column {
id: layout
width: parent.width

Text {
width: parent.width
text: location.address.text
wrapMode: Text.WordWrap
}

Text {
text: "(" + location.coordinate.longitude + ", " +
location.coordinate.latitude + ")"
}

Rectangle {
width: parent.width
height: units.gu(0.1)
color: "green"
}
}

MouseArea {
anchors.fill: parent
onClicked: {
console.log("it is clicked")
map.coordinate = location.coordinate
// We do not need the position info any more
me.active = false
}
}
}
}

Map {
id: map
width: parent.width
height: parent.height*2/3
property var coordinate

plugin : Plugin {
name: "osm"
}

zoomLevel: 14
center: coordinate

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

Component.onCompleted: {
zoomLevel = 14
}
}
}
}

Component.onCompleted: {
console.log("geocodeModel limit: " + geocodeModel.limit)
}
}
}

运行我们的应用：


  

 


 


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