Componente de mapa interactivo
Traiga fácilmente capacidades de mapeo dinámico a sus aplicaciones de lienzo al ver la posición física de los objetos desde un origen de datos, o ingresando nuevas ubicaciones físicas.
Panorámica, inclinación, zoom y arrastre para centrar la vista del mapa. A medida que se aleje, los marcadores se agruparán opcionalmente para representar grupos densos de datos.
La ubicación actual del usuario también se puede representar en el mapa en dispositivos móviles o experiencias web.
El componente de mapa también admite vistas de carretera y de satélite.
Para usar el componente, necesita habilitar características geoespaciales para el entorno.
Asegúrate también de revisar los requisitos previos para usar componentes geoespaciales.
Usar el componente
Inserte el componente en su aplicación como lo haría normalmente para cualquier otro control o componente.
Con una aplicación abierta para editar en el Power Apps Studio:
- Abra la pestaña Insertar.
- Expandir Medios.
- Seleccione el componente Mapa para colocarlo en el centro de la pantalla de la aplicación, o arrástrelo para colocarlo en cualquier lugar de la pantalla.
- Para mostrar la ubicación actual del usuario,
- establezca Mostrar ubicación actual en Activado.
- Bajo la propiedad Latitud de la ubicación actual, inserte Location.Latitude.
- En la propiedad Longitud de la ubicación actual, inserte Location.Longitude.
- El pin de ubicación actual debería aparecer ahora en el mapa.
Puede modificar el componente utilizando una serie de propiedades.
Use el componente de mapa con datos de Excel
Puede cargar una tabla que contenga datos existentes de un libro de Excel en el componente del mapa. El componente trazará cada fila en su tabla como un pin de mapa.
Su libro de trabajo debe contener una tabla con nombre con las siguientes columnas que luego deben asignarse a la propiedad asociada en el panel Avanzado del componente.
| Descripción de columna | Mapas de propiedad | Necesario |
|---|---|---|
| Etiqueta para el ancla | ItemsLabels | Necesario |
| Longitud del ancla | ItemsLongitudes | Necesario |
| Latitud del ancla | ItemsLatitudes | Necesario |
| Color del marcador | ItemsColors | Opcionales |
| Icono del marcador | ItemsIcons | Opcionales |
El campo para el color acepta cualquier cadena de CSS, como se define en Enumeración de colores y funciones ColorFade, ColorValue y RGBA en Power Apps.
Puede utilizar los iconos descritos en el tema Lista de plantillas de imágenes como su icono.
La siguiente tabla de Excel muestra las columnas requeridas:
Puede copiar los siguientes datos de muestra para probar esta funcionalidad:
| Nombre | Longitud | Latitud | Color | Icon |
|---|---|---|---|---|
| Fourth Coffee (muestra) | -98,29277 | 26.2774 | Azul | marker-flat |
| Litware, Inc. (muestra) | -96,85572 | 32.55253 | #ffefcd | hexagon-thick |
| Adventure Works (ejemplo) | -96,99952 | 32.72058 | coche | |
| Fabrikam, Inc. (muestra) | -118,30746 | 34.86543 | ||
| Blue Yonder Airlines (muestra) | -118,66184 | 34.17553 | ||
| City Power & Light (muestra) | -113,46184 | 37.15363 | ||
| Contoso Pharmaceuticals (muestra) | -80,26711 | 40.19918 | ||
| Alpine Ski House (muestra) | -102,63908 | 35.20919 | ||
| A Datum Corporation (ejemplo) | -89,39433 | 40.71025 | ||
| Coho Winery (muestra) | -116,97751 | 32.87466 |
Copie y pegue la tabla en un nuevo libro de Excel.
Seleccione una de las celdas y luego, en la pestaña Inicio en la cinta, seleccione Formato como tabla y elija cualquier estilo, y luego Aceptar.
Seleccione la tabla y después vaya a la pestaña Diseño de tabla en la cinta. Ingrese un nombre para la tabla en Nombre de la tabla:, por ejemplo TestData.
Guarde el libro.
Abra o cree una nueva aplicación en Power Apps e inserte el componente de mapa.
En el panel Propiedades, seleccione el campo Ubicaciones(elementos) y luego busque excel y seleccione Importar desde Excel.
Para mostrar la ubicación actual del usuario:
- Cambie Mostrar ubicación actual a Activado.
- Bajo la propiedad Latitud de la ubicación actual, inserte Location.Latitude.
- En la propiedad Longitud de la ubicación actual, inserte Location.Longitude.
- El pin de ubicación actual debería aparecer ahora en el mapa.
Características interactivas del mapa
- Usar datos de Excel para insertar anclajes
- Agregar tarjetas de información a los anclajes
- Dibujar e insertar formas en mapas
Propiedades
Se pueden definir varias propiedades para el componente de mapa.
Propiedades de entrada
Las siguientes propiedades se pueden definir y configurar en el panel de Propiedades del componente.
Algunas propiedades solo están disponibles en la pestaña Avanzado, en el panel Propiedades de la sección Más opciones.
| Propiedad | Descripción | Escribir | Ubicación |
|---|---|---|---|
| Origen de datos (elementos) | Origen de datos (tabla) que enumera un conjunto predefinido de longitudes y latitudes para mostrar como chincheta de mapa en el mapa cuando se carga. Asigne cada una de las columnas de sus datos utilizando ItemAddresses, ItemLongitudes, ItemLatitudes e ItemLabels. | No aplicable | Propiedades |
| Usar ubicación predeterminada | Si el mapa se inicializa en una ubicación predeterminada establecida por el usuario. | Booleana | Propiedades |
| Longitud predeterminada | Longitud a la que iría el mapa al cargarse si Usar ubicación predeterminada está habilitado. | Número de punto flotante | Propiedades |
| Latitud predeterminada | Latitud a la que iría el mapa al cargarse si Usar ubicación predeterminada está habilitado. | Número de punto flotante | Propiedades |
| Nivel de zoom predeterminado | Nivel de zoom al que se establecería el mapa al cargarse si Usar ubicación predeterminada está habilitado. | Entero | Propiedades |
| Mostrar ubicación actual | Si el mapa debe mostrar la ubicación actual del usuario. | Booleana | Propiedades |
| Latitud de la ubicación actual | La latitud de la ubicación actual del usuario si Mostrar ubicación actual se ha habilitado. | Número de punto flotante | Propiedades |
| Longitud de la ubicación actual | La longitud de la ubicación actual del usuario si Mostrar ubicación actual se ha habilitado. | Número de punto flotante | Propiedades |
| Vista de satélite | Si el estilo del mapa es una vista de satélite o una vista de carretera. | Booleana | Propiedades |
| Chinchetas agrupadas | Si las anclas del mapa están agrupadas. | Booleana | Propiedades |
| Control de zoom | Si el componente de zoom aparece en el mapa. | Booleana | Propiedades |
| Control de brújula | Si el componente de brújula aparece en el mapa. | Booleana | Propiedades |
| Control de inclinación | Si el componente de inclinación aparece en el mapa. | Booleana | Propiedades |
| Color de chincheta | El color de las chinchetas. | Selector de colores | Propiedades |
| ItemsLabels | Una columna en Elementos con las cadenas que desea usar como etiquetas para las chinchetas. | ColumnName | Avanzada |
| ItemsAddresses | Una columna en Elementos con las cadenas que representan la ubicación de las chinchetas. | ColumnName | Avanzada |
| ItemsLongitudes | Nombre de la columna de la tabla de su origen de datos con números de coma flotante que representan la posición de longitud de las chinchetas. | ColumnName | Avanzada |
| ItemsLatitudes | Nombre de la columna de la tabla de su origen de datos con números de coma flotante que representan la posición de latitud de las chinchetas. | ColumnName | Avanzada |
| ItemsColors | Color de los marcadores | Cualquier cadena de color de CSS | Avanzada |
| ItemsIcons | Icono de los marcadores | Iconos definidos en plantillas de imágenes de Azure | Avanzada |
| Artículos | Nombre de la tabla en su origen de datos que contiene todos los registros que desea marcar en el mapa utilizando chinchetas. Cada fila debe tener una entrada para la etiqueta, la longitud y la latitud de cada fila. | TableName | Avanzada |
| OnMapClick | Cómo responde el mapa cuando se hace clic en una ubicación. | Evento | Avanzada |
| OnSelect | Cómo responde la aplicación cuando se selecciona un marcador de mapa. | Evento | Avanzada |
| OnLoad | Cómo responde la aplicación cuando el mapa termina de cargarse. | Evento | Avanzada |
| OnItemsChange | Cómo responde la aplicación cuando cambian los marcadores de mapa. | Evento | Avanzada |
| Mostrar tarjetas informativas | Si aparecen tarjetas informativas en los marcadores de mapa. | Enumeración | Propiedades |
| Mostrar formas | Si aparecen en el mapa las formas de Shapes_Items. | Booleana | Propiedades |
| Mostrar etiquetas de formas | Si aparecen en las formas del mapa las etiquetas. | Booleana | Propiedades |
| Habilitar el dibujo de formas | Si aparece en el mapa el componente de herramientas de dibujo. | Booleana | Propiedades |
| Habilitar la eliminación de formas y la edición de etiquetas | Si las formas se pueden eliminar y sus etiquetas se pueden editar en el mapa. | Booleana | Propiedades |
| Shapes_Items | Nombre de la tabla en su origen de datos que contiene todos los registros con objetos GeoJSON que desea mostrar en el mapa como formas. | TableName | Avanzada |
| ShapeGeoJSONObjects | Nombre de la columna de la tabla en su origen de datos con cadenas que representan los objetos GeoJSON de las formas. | ColumnName | Avanzada |
| ShapeLabels | Una columna de Shapes_Items con las cadenas que desea usar como etiquetas para las formas. | ColumnName | Avanzada |
| ShapeColors | Color de las formas. | ColumnName | Avanzada |
| OnShapeSelected | Cómo responde la aplicación cuando se selecciona una forma del mapa. | Evento | Avanzada |
| OnShapeCreated | Cómo responde la aplicación cuando se crea una forma en el mapa. | Evento | Avanzada |
| OnShapeEdited | Cómo responde la aplicación cuando se edita una forma del mapa. | Evento | Avanzada |
| OnShapeDeleted | Cómo responde la aplicación cuando se elimina una forma del mapa. | Evento | Avanzada |
Propiedades de salida
El componente genera varias propiedades cuando un usuario interactúa con él dentro de una aplicación. Puede usar estas salidas en otros componentes o para personalizar la experiencia.
En la tabla siguiente se enumeran las propiedades de salida disponibles.
| Propiedad | Descripción | Tipo |
|---|---|---|
| Ubicación del centro | Ubicación del centro del mapa. | No aplicable |
| OnMapClick | La última ubicación en la que se ha hecho clic en el mapa. | No aplicable |
| Selecc. | El marcador seleccionado en el mapa. | Grabar |
| SelectedItems | Los marcadores seleccionados del clúster seleccionado en el mapa. | Tabla |
| GeocodedItems | Ubicaciones geocodificadas de los marcadores en el mapa. | Tabla |
| ClickedLocation | La última ubicación en la que se hizo clic en el mapa como .Latitude o .Longitude. |
Grabar |
| Shapes_Selected | El registro de la forma seleccionada de Shapes_Items. | Grabar |
| Shapes_SelectedItems | Los registro de las formas superpuestas seleccionadas de Shapes_Items. | Tabla |
| SelectedShape | La forma seleccionada en el mapa con .Perimeter y .Area. |
Grabar |
| DeletedShape | La última forma eliminada del mapa con .Perimeter and ``.Area. |
Grabar |
| GeoJSON | Lista de formas del mapa con el formato GeoJSON de la colección de características. | String |
Propiedades adicionales (comunes)
BorderColor: el color del borde de un control.
BorderRadius: el radio del borde de un control.
BorderStyle: si el borde del control es Continuo, De líneas, De puntos o Ninguno.
BorderThickness: el grosor del borde de un control.
Color: el color del texto en un control.
DisplayMode: indica si el control permite entradas de usuario (Editar), solo muestra datos (Ver) o si está deshabilitado (Deshabilitado).
Height: la distancia entre los bordes superior e inferior de un control.
TabIndex: orden de navegación del teclado.
Tooltip: texto explicativo que aparece cuando el usuario mantiene el mouse sobre un control.
Transparencia: lo transparente que es el componente, como porcentaje.
Visible: indica si un control aparece o está oculto.
Width: la distancia entre los bordes de más a la derecha e izquierda de un control.
X: la distancia entre el borde de más a la izquierda de un control y el borde de más a la izquierda de su contenedor primario (o pantalla, si el control no tiene un contenedor primario).
Y: la distancia entre el borde superior de un control y el borde superior de su contenedor primario (o pantalla, si no tiene contenedor primario).
Otros componentes geoespaciales
Para ver sugerencias de direcciones dinámicas mientras escribe, use el componente Entrada de dirección.