En esta página

Mapa de lugares (QML)

El ejemplo Mapa de lugares muestra cómo buscar y mostrar una lista de lugares en un mapa utilizando MapItemView.

El ejemplo muestra un mapa de la posición actual o, si no hay ninguna posición disponible, utiliza Oslo/Noruega. A continuación, se realiza una búsqueda de lugares que coincidan con el término "comida" y se muestra cada resultado en el mapa.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Para escribir la aplicación QML que mostrará lugares en un mapa, comenzamos haciendo las siguientes declaraciones de importación.

import QtQuick
import QtPositioning
import QtLocation

Instanciar una instancia de Plugin. El Plugin es efectivamente el backend desde donde se obtienen los lugares. Dependiendo del plugin elegido algunos parámetros obligatorios pueden ser necesarios. En este caso se selecciona el plugin OSM que no tiene ningún parámetro obligatorio.

Plugin {
    id: myPlugin
    name: "osm"
    //specify plugin parameters if necessary
    //PluginParameter {...}
    //PluginParameter {...}
    //...
}

A continuación instanciamos un PlaceSearchModel que podemos utilizar para especificar los parámetros de búsqueda y realizar una operación de búsqueda de lugares. Para propósitos ilustrativos, update() es invocado una vez que la construcción del modelo se ha completado. Normalmente, update() se invocaría en respuesta a una acción del usuario, como la pulsación de un botón.

PlaceSearchModel {
    id: searchModel

    plugin: myPlugin

    searchTerm: "food"
    searchArea:  QtPositioning.circle(positionSource.lastSearchPosition, 1000 /* 1 km radius */)
    Component.onCompleted: update()
}

El mapa se muestra utilizando el tipo MapView y en su interior declaramos el MapItemView y suministramos el modelo de búsqueda y un delegado. Se ha utilizado un delegado inline y hemos supuesto que cada resultado de búsqueda es de type PlaceSerachesult . En consecuencia se asume que siempre tenemos acceso al lugar role, otros tipos de resultado de búsqueda pueden no tener un lugar role.

MapView {
    id: view
    anchors.fill: parent
    map.plugin: myPlugin;
    map.center: positionSource.lastSearchPosition
    map.zoomLevel: 13

    MapItemView {
        model: searchModel
        parent: view.map
        delegate: MapQuickItem {
            coordinate: place.location.coordinate

            anchorPoint.x: image.width * 0.5
            anchorPoint.y: image.height

            sourceItem: Column {
                Image { id: image; source: "marker.png" }
                Text { text: title; font.bold: true }
            }
        }
    }
}

Por último, se utiliza PositionSource para reajustar el mapa a la ubicación actual y encontrar lugares de "comida" en la nueva zona. La información de posición se actualiza cada 2 minutos y si la nueva posición está a más de 500 metros de la última zona de búsqueda de comida se vuelve a lanzar la búsqueda de lugares.

PositionSource {
    id: positionSource
    property variant lastSearchPosition: QtPositioning.coordinate(59.93, 10.76) //Initialized/Fallback to Oslo
    active: true
    updateInterval: 120000 // 2 mins
    onPositionChanged:  {
        var distance = lastSearchPosition.distanceTo(position.coordinate)
        if (distance > 500) {
            // 500m from last performed food search
            lastSearchPosition = positionSource.position.coordinate
        }
    }
}

Proyecto de ejemplo @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.