利用PlaceSearchModel来在规定的区域里搜寻兴趣点

在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
}
}
}

}
}

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