lit google map

Lit-Google-map

Este projeto é o porto do Google-map webcomponent com base na biblioteca Lit V2.

Atualização v1.0.0 (23/02/2022)

• Projeto portado para Lit V2
• Formas adicionadas: círculo e polígono
• Correções de bug

Índice

Como usar

Atributos do elemento do mapa

Atributos do elemento marcador

Atributos do elemento de forma de círculo

Atributos do elemento de forma de polígono

Como construir

Licença

Como usar

Inclua pacote de mapa de Google Lit no arquivo HTML:

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

ou sua versão minificada:

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

Use o componente em qualquer lugar que desejar (lembre -se de preencher a chave da API do Google Maps):

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

Você também pode incluir qualquer 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 >

ou/e 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 do elemento do mapa

• ' API -KEY ' - Tecla da API do mapa do Google
• ' Idioma ' - linguagem do mapa do Google (opcional)
• ' MAP -ID ' - MAP do Google MAPID (Opcional)
• ' versão ' - versão do script JS do mapa do Google para carregar (padrão: '3.48')
• ' Styles ' - Estilos de mapa no formato JSON (opcional)
• ' Zoom ' - nível de zoom (padrão: '8')
• ' Fit to Markers' -Fit Map Area para exibir todos os marcadores
• ' Map -Type ' - Map Type to Display: 'Roteiro', 'Satélite', 'Hybrid', 'Terreno'
• ' Latitude Central'- Latitude do Mapa Ponto Central Inicial
• ' Centro -Longitude ' - longitude do mapa ponto inicial

Exemplo:

 < 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 do elemento marcador

• ' Latitude ' - posição de latitude do marcador
• ' longitude ' - posição de longitude marcadora
• ' Label ' - etiqueta de marcador
• ' Z -Index ' - Índice Z Marcador
• ' Ícone ' - URL da imagem do ícone marcador

Exemplo:

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

Os marcadores também podem ter infowindow associado ao conteúdo 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 do elemento de forma de círculo

• ' Latitude central ' - posição de latitude central do círculo
• ' Centro -Longitude ' - Circle Center Longitude Position
• ' raio ' - raio do círculo (padrão: 100000)
• ' Fill -Color ' - cor de preenchimento do círculo
• ' Opacidade de preenchimento ' - Opacidade de preenchimento do círculo
• ' cor de golpe ' - cor de círculo de círculos
• ' Opacidade de golpe ' - Opacity de AVC em Circle
• ' peso de traço ' - peso de curva de círculo

Exemplo:

 < 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 do elemento de forma de polígono

• ' Paths ' - Polygon Paths Points na forma de JSON Array
• ' Fill -Color ' - cor de preenchimento de polígono
• ' Opacidade de preenchimento ' - opacidade de preenchimento de polígono
• ' cor de golpe ' - cor de pista de polígono
• ' opacidade de golpe ' - opacidade de golpe de polígono
• ' peso de golpe ' - peso de pista de polígono

Exemplo:

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

Como construir

Antes da construção, instale todos os pacotes necessários:

 npm install

Construção nua:

 npm run build

Construa com etapa do pacote:

 npm run bundle

Licença

Mit