lit google map

lit-google-map

Este proyecto es el puerto de Google-Map Webcomponent basado en la biblioteca LIT V2.

Actualización V1.0.0 (23/02/2022)

• Proyecto portado a LIT V2
• Formas agregadas: círculo y polígono
• Correcciones de errores

Tabla de contenido

Cómo usar

Atributos del elemento de mapa

Atributos del elemento marcador

Atributos del elemento de forma del círculo

Atributos del elemento de forma de polígono

Cómo construir

Licencia

Cómo usar

Incluya paquete de mapas de google lit en el archivo HTML:

 < script src =" lit-google-map.bundle.js " > </ script >

o su versión minificada:

 < script src =" lit-google-map.bundle.min.js " > </ script >

Use el componente en cualquier lugar que desee (recuerde completar la tecla API de Google Maps):

 < lit-google-map api-key =" YOUR_GOOGLE_MAPS_API_KEY " >    
</ lit-google-map >

También puede incluir cualquier número de marcadores de mapa:

 < lit-google-map api-key =" YOUR_GOOGLE_MAPS_API_KEY " >
    < lit-google-map-marker slot =" markers " latitude =" 49.4404582 " longitude =" 20.2700361 " >
    </ lit-google-map-marker >  
    < lit-google-map-marker slot =" markers " latitude =" 50.797444 " longitude =" 20.4600623 " >
    </ lit-google-map-marker >
</ lit-google-map >

o/y formas:

 < lit-google-map api-key =" YOUR_GOOGLE_MAPS_API_KEY " >  
    < lit-google-map-circle slot =" shapes " center-latitude =" 49.4404582 " center-longitude =" 20.2700361 " >
    </ lit-google-map-circle >
</ lit-google-map > 

Atributos del elemento de mapa

• ' API -Key ' - Clave de API de Google Map
• ' Idioma ' - Idioma de mapa de Google (opcional)
• ' map -id ' - Google Map Mapid (opcional)
• ' Versión ' - Google Map JS Script Version para cargar (predeterminado: '3.48')
• ' estilos ' - estilos de mapa en formato JSON (opcional)
• ' Zoom ' - Nivel de zoom (predeterminado: '8')
• ' Fit-to-Markers' -Área de mapa de ajuste para mostrar todos los marcadores
• ' Tipo de mapa ' - Tipo de mapa para mostrar: 'Hoja de ruta', 'satélite', 'híbrido', 'terreno'
• ' Latitud central'- Latitud del mapa Punto central inicial
• ' Center -longitud ' - Longitud del mapa Punto central inicial

Ejemplo:

 < lit-google-map api-key =" SOME_API_KEY " zoom =" 6 " map-type =" satellite " center-latitude =" 51.8436554 " center-longitude =" 19.5070867 " >    
</ lit-google-map > 

Atributos del elemento marcador

• ' Latitud ' - Posición de latitud del marcador
• ' Longitud ' - Posición de longitud del marcador
• ' etiqueta ' - etiqueta marcador
• Índice ' Z -Index ' - Marcador Z
• ' icono ' - URL de imagen de icono de marcador

Ejemplo:

 < lit-google-map-marker slot =" markers " latitude =" 49.4404582 " longitude =" 20.2700361 " >
</ lit-google-map-marker >

Los marcadores también pueden tener infowindow asociado con contenido HTML:

 < lit-google-map-marker slot =" markers " latitude =" 50.797444 " longitude =" 20.4600623 " >
    < p > Some description </ p >
    < img src =" some_image.jpg " alt =" some image " >
</ lit-google-map-marker > 

Atributos del elemento de forma del círculo

• ' Latitud central ': posición de latitud central en círculo
• ' Center -longitud ' - Círculo de longitud central de la longitud
• ' Radius ' - Circle Radius (predeterminado: 100000)
• ' Color de relleno ' - Color de relleno en círculo
• ' Opacidad de relleno ' - Opacidad de relleno círculo
• ' Color de carrera ' - Color de trazo círculo
• ' Opacidad de accidente cerebrovascular ' - Opacidad del trazo círculo
• ' Stroke -Weight ' - Círculo de peso del trazo

Ejemplo:

 < lit-google-map-circle slot =" shapes " center-latitude =" 53.176389 " center-longitude =" 22.073056 " radius =" 50000 "  fill-color =" #7FB3D5 " fill-opacity =" 0.35 " stroke-color =" #2874A6 " stroke-opacity =" 0.8 " stroke-weight =" 5 " >
</ lit-google-map-circle > 

Atributos del elemento de forma de polígono

• ' Ruts ' - Politeras Puntos en forma de matriz JSON
• ' Color de relleno ' - Color de llenado de polígono
• ' Opacidad de relleno ' - Opacidad de llenado de polígono
• ' Color de carrera ' - Color de trazo de polígono
• ' Opacidad de accidente cerebrovascular ' - Opacidad de accidente cerebrovascular de polígono
• ' Stroke -Weight ' - Polygan Stroke Weight

Ejemplo:

 < lit-google-map-polygon slot =" shapes " paths =' [{"lat": 53.7332, "lng": 15.5180}, {"lat": 54.0444, "lng": 18.1379}, {"lat": 53.2028, "lng": 16.9292}, {"lat": 53.7332, "lng": 15.5180}] ' fill-color =" #7FB3D5 " fill-opacity =" 0.35 " stroke-color =" #2874A6 " stroke-opacity =" 0.8 " stroke-weight =" 5 " >
</ lit-google-map-polygon >   

Cómo construir

Antes de construir instalar todos los paquetes requeridos:

 npm install

Construcción desnuda:

 npm run build

Construir con el paso del paquete:

 npm run bundle

Licencia

MIT