在Ubuntu SDK中,它提供了一个PlaceSearchModel接口.通过这个接口,我们可以在规定的区域里搜寻我们需要的地点,比如,KFC, Pizzar,或银行.在今天的教程中,我们来利用这个API来展示如何搜寻我们的兴趣点.
PlaceSearchModel的基本用法:
PlaceSearchModel {
id: searchModel
plugin: myPlugin
searchTerm: "KFC"
searchArea: QtPositioning.circle(curLocation)
Component.onCompleted: update()
}
这里的searchTerm就是我们需要搜索的关键词.searchArea标示的是我们以什么为中心进行搜索.每当有一个新的关键词要进行搜索时,我们可以通过如下的方式来做:
searchModel.searchTerm = text
searchModel.update();
这里的plugin是已经存在于我们的系统的plugin.我们实际上是可以通过如下的方式来得到系统所有的plugin的:
Plugin {
id: plugin
// Set the default one
Component.onCompleted: {
name = availableServiceProviders[0]
}
}
具体的使用方法可以参阅文章" 在Ubuntu手机上利用Map API来显示地图并动态显示标记".
当一个地点被成功搜寻后,它返回的数据如下:
我们可以通过这些数据来显示我们得到位置的信息.
基于这些理解,我们做出了我们的例程:
Main.qml
import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Popups 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: "placesearchmodel.liu-xiao-guo"
width: units.gu(60)
height: units.gu(85)
property bool centerCurrent: true
Plugin {
id: myPlugin
name: "osm"
}
PositionSource {
id: positionSource
property variant lastSearchPosition: curLocation
active: true
updateInterval: 5000
onPositionChanged: {
var currentPosition = positionSource.position.coordinate
if ( centerCurrent ) {
map.center = currentPosition
}
var distance = currentPosition.distanceTo(lastSearchPosition)
// if (distance > 500) {
// 500m from last performed pizza search
lastSearchPosition = currentPosition
searchModel.searchArea = QtPositioning.circle(currentPosition)
searchModel.update()
// }
}
}
property variant curLocation: QtPositioning.coordinate( 59.93, 10.76, 0)
PlaceSearchModel {
id: searchModel
plugin: myPlugin
searchTerm: "KFC"
searchArea: QtPositioning.circle(curLocation)
Component.onCompleted: update()
}
Connections {
target: searchModel
onStatusChanged: {
if (searchModel.status == PlaceSearchModel.Error)
console.log(searchModel.errorString());
}
}
Component {
id: pop
Popover {
id: popover
width: units.gu(20)
property var model
Column {
anchors {
left: parent.left
right: parent.right
}
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: {
switch (model.type) {
case PlaceSearchModel.UnknownSearchResult:
return "type: UnknownSearchResult"
case PlaceSearchModel.PlaceResult:
return "type: PlaceResult"
case PlaceSearchModel.ProposedSearchResult:
return "type: ProposedSearchResult"
}
}
fontSize: "medium"
}
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: "title: " + model.title
fontSize: "medium"
}
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: "distance: " + (model.distance).toFixed(2) + "m"
fontSize: "medium"
}
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: "sponsored: " + model.sponsored
fontSize: "medium"
}
}
}
}
Page {
id: page
header: standardHeader
PageHeader {
id: standardHeader
visible: page.header === standardHeader
title: "PlaceSearchModel"
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: "KFC"
onAccepted: {
// clear all of the markers
mapItemView.model.reset()
searchModel.searchTerm = text
searchModel.update();
}
}
}
Item {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
top: page.header.bottom
}
Map {
id: map
anchors.fill: parent
plugin: Plugin {
name: "osm"
}
center: curLocation
zoomLevel: 13
gesture {
onPanFinished: {
centerCurrent = false
}
}
MapCircle {
id: mylocation
center: positionSource.position.coordinate
radius: units.gu(4)
color: "yellow"
}
MapItemView {
id: mapItemView
model: searchModel
delegate: MapQuickItem {
id: mapitem
coordinate: place.location.coordinate
anchorPoint.x: image.width * 0.5
anchorPoint.y: image.height
sourceItem: Column {
Image {
width: units.gu(3)
height: width
id: image
source: "marker.png"
}
Text { text: title; font.bold: true }
}
MouseArea {
anchors.fill: parent
onClicked: {
onClicked: PopupUtils.open(pop, mapitem, { 'model': model })
}
}
}
}
Component.onCompleted: {
zoomLevel = 15
}
}
}
}
}