lit google map

map de google

Ce projet est le port de Google-Map WebComponent basé sur la bibliothèque LIT V2.

Mise à jour v1.0.0 (23/02/2022)

• Projet porté sur Lit v2
• Formes ajoutées: cercle et polygone
• Correctifs de bugs

Table des matières

Comment utiliser

Attributs de l'élément de carte

Attributs de l'élément de marqueur

Attributs de l'élément de forme de cercle

Attributs de l'élément de forme de polygone

Comment construire

Licence

Comment utiliser

Inclure le bundle Lit-Google-Map dans le fichier HTML:

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

ou sa version minifiée:

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

Utilisez le composant dans n'importe quel endroit que vous souhaitez (n'oubliez pas de remplir la clé de l'API Google Maps):

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

Vous pouvez également inclure n'importe quel nombre de marqueurs de carte:

 < 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 / et formes:

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

Attributs de l'élément de carte

• ' API-Key ' - clé API Google Map
• ' Langue ' - Langue Google Map (facultative)
• ' Map-ID ' - Google Map Mapid (facultatif)
• ' Version ' - Google Map JS Script version à charger (par défaut: '3.48')
• ' Styles ' - Styles de carte au format JSON (facultatif)
• « Zoom » - Niveau de zoom (par défaut: «8»)
• ' Fit-to-marqueurs ' - Ajustement la zone de la carte pour afficher tous les marqueurs
• « Type de carte » - Type de carte à afficher: «feuille de route», «satellite», «hybride», «terrain»
• ' Centre-Latitude ' - latitude du point central initial de la carte
• « Centre-longitude » - longitude du point central initial de la carte

Exemple:

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

Attributs de l'élément de marqueur

• ' latitude ' - position de latitude marqueur
• « Longitude » - position de longitude marqueur
• ' Label ' - Label de marqueur
• ' z-index ' - Index de marqueur z
• ' icône ' - URL de l'image d'icône de marqueur

Exemple:

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

Les marqueurs peuvent également avoir une infoindow associée avec un contenu 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 > 

Attributs de l'élément de forme de cercle

• « Latitude centrale » - Position de latitude centrale du cercle
• « Centre-longitude » - Position de longitude du centre de cercle
• ' RADIUS ' - Radius de cercle (par défaut: 100000)
• ' Fill-Color ' - Couleur de remplissage de cercle
• ' Fill-Opacité ' - Opacité de remplissage de cercle
• ' TRAD-COLOR ' - Color Color Color
• « Opacité de trait » - Opacité de coup de cercle
• ' Stroke-Weight ' - Couper le poids de la course

Exemple:

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

Attributs de l'élément de forme de polygone

• ' PATHS ' - Points de Polygon Points sous forme de tableau JSON
• ' Fill-Color ' - Couleur de remplissage du polygone
• ' Fill-Opacité ' - Opacité de remplissage du polygone
• ' TRAD-COLOR ' - Couleur de coup de polygone
• « Opacité de trait » - Opacité de coup de polygone
• ' Stroke-Weight ' - Polygon Strake Poids

Exemple:

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

Comment construire

Avant la construction, installez tous les packages requis:

 npm install

Construction nue:

 npm run build

Construire avec étape du paquet:

 npm run bundle

Licence

Mit