lit google map

Lit-Google-Map

Dieses Projekt ist Port von Google-MAP WebComponent basierend auf LIT V2-Bibliothek.

Aktualisieren Sie v1.0.0 (23/02/2022)

• Projekt portiert auf Lit v2
• Formen hinzugefügt: Kreis und Polygon
• Fehlerbehebungen

Inhaltsverzeichnis

Wie man benutzt

Kartenelementattribute

Markierungselementattribute

Kreisformelementattribute

Polygonformelementattribute

Wie man baut

Lizenz

Wie man benutzt

Fügen Sie Lit-Google-Map-Bundle in die HTML-Datei ein:

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

oder seine abgebildete Version:

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

Verwenden Sie die Komponente an jedem gewünschten Ort (denken Sie daran, den Google Maps -API -Schlüssel auszufüllen):

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

Sie können auch eine beliebige Anzahl von Kartenmarkierungen einfügen:

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

oder/und Formen:

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

Kartenelementattribute

• ' Api -Key ' - Google Map -API -Schlüssel
• ' Sprache ' - Google Map Language (optional)
• ' map -id ' - Google MapID (optional)
• ' Version ' - Google Map JS -Skriptversion zum Laden (Standard: '3.48')
• ' Styles ' - Kartenstile im JSON -Format (optional)
• ' Zoom ' - Zoomstufe (Standard: '8')
• " Fit-to-Marker "-Fit Map-Bereich, um alle Markierungen anzuzeigen
• " MAP -Typ " - Kartentyp zum Anzeigen: "Roadmap", "Satellit", "Hybrid", "Terrain"
• ' Mitte-Latitude'- Breite des MAP-Anfangszentrums
• ' Mitte -Long ' - Länge des MAP -Anfangszentrums

Beispiel:

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

Markierungselementattribute

• ' Breitengrad ' - Marker Breitengradposition
• ' Längengrad ' - Marker -Längengradposition
• ' Label ' - Marker -Etikett
• ' Z -Index ' - Marker Z Index
• ' Icon ' - Marker -Symbol Bild -URL

Beispiel:

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

Marker können auch infowindow mit HTML -Inhalten zugeordnet haben:

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

Kreisformelementattribute

• ' Mitte -Latitude ' - Circle Center Breitengradposition
• ' Mitte -Long ' - Circle Center Longitude Position
• ' Radius ' - Kreisradius (Standard: 100000)
• " Füllfarbe " - Circle Füllfarbe
• " Fülloptimierung " - Kreisfüllungsfüllung
• " Schlaganfallfarbe " - Circle Strich Farbe
• ' Schlaganfalloptivität ' - Kreisstrich -Deckkraft
• " Schlaganfallgewicht " - Kreisschlaggewicht

Beispiel:

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

Polygonformelementattribute

• ' Pfade ' - Polygonpfade Punkte in Form von JSON -Array
• " Füllfarbe " - Polygon Füllfarbe
• ' Fülloptimierung ' - Polygonfüllungsfüllung
• " Schlaganfallfarbe " - Polygon -Schlaganfallfarbe
• ' Schlaganfalloptivität ' - Polygon -Schlaganfall -Deckkraft
• " Schlaganfallgewicht " - Polygon -Schlaganfallgewicht

Beispiel:

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

Wie man baut

Vor dem Bau installieren Sie alle erforderlichen Pakete:

 npm install

Nackter Build:

 npm run build

Erstellen Sie mit Bündelschritt:

 npm run bundle

Lizenz

MIT