利用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