lit google map

lit-google-peta

Proyek ini adalah port komponen web Google-Map berdasarkan perpustakaan Lit V2.

Perbarui v1.0.0 (23/02/2022)

• Proyek porting untuk menyalakan v2
• Menambahkan bentuk: lingkaran dan poligon
• Perbaikan bug

Daftar isi

Cara menggunakan

Atribut Elemen Peta

Atribut Elemen Marker

Atribut elemen bentuk lingkaran

Atribut elemen bentuk poligon

Cara membangun

Lisensi

Cara menggunakan

Sertakan bundel lit-google-map dalam file html:

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

atau versinya:

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

Gunakan komponen di tempat mana pun yang Anda inginkan (ingat untuk mengisi kunci API Google Maps):

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

Anda juga dapat menyertakan sejumlah penanda peta:

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

atau/dan bentuk:

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

Atribut Elemen Peta

• ' API -Key ' - Kunci API Google Map
• ' Bahasa ' - Google Map Language (Opsional)
• ' peta -id ' - Google Map MapID (opsional)
• ' Versi ' - Google Map JS Script Versi untuk memuat (default: '3.48')
• ' Styles ' - Peta Styles dalam format JSON (opsional)
• ' Zoom ' - Level Zoom (default: '8')
• ' Fit-to-Markers' -Area peta fit untuk menampilkan semua penanda
• ' Peta -Type ' - Jenis peta untuk ditampilkan: 'Roadmap', 'Satellite', 'Hybrid', 'Medan'
• ' Center-Latitude'- Lintang peta titik pusat awal peta
• ' Center -Longitude ' - bujur dari titik pusat awal peta

Contoh:

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

Atribut Elemen Marker

• ' Latitude ' - Posisi Lintang Penanda
• ' Longitude ' - Posisi bujur penanda
• ' Label ' - Label Marker
• ' z -index ' - indeks penanda z
• ' Ikon ' - URL Gambar Ikon Marker

Contoh:

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

Penanda juga dapat memiliki InfoWindow terkait dengan konten 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 > 

Atribut elemen bentuk lingkaran

• ' Center -Latitude ' - Posisi Latitude Pusat Lingkaran
• ' Center -Longitude ' - Posisi Bujur Pusat Lingkaran
• ' Radius ' - lingkaran radius (default: 100000)
• ' Isi -warna ' - Warna Circle Fill
• ' Fill -Opacity ' - Opacity Circle Fill
• ' Stroke -Color ' - Warna Lingkaran Stroke
• ' Stroke -Opacity ' - Opacity Lingkaran Stroke
• ' Stroke -weight ' - Berat lingkaran stroke

Contoh:

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

Atribut elemen bentuk poligon

• ' Paths ' - Jalur poligon titik dalam bentuk array JSON
• ' Isi -warna ' - Warna pengisian poligon
• ' Isi -opacity ' - opacity mengisi poligon
• ' stroke -color ' - warna stroke poligon
• ' Stroke -opacity ' - opacity stroke poligon
• ' Stroke -weight ' - berat stroke poligon

Contoh:

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

Cara membangun

Sebelum membangun pemasangan semua paket yang diperlukan:

 npm install

Bare Build:

 npm run build

Bangun dengan Bundle Step:

 npm run bundle

Lisensi

Mit