lit google map

แผนที่ไฟ

โครงการนี้เป็นพอร์ตของเว็บคอมโพเนนต์ Google-MAP ตามไลบรารี Lit V2

อัปเดต v1.0.0 (23/02/2022)

• โครงการพอร์ตไปยัง Lit v2
• เพิ่มรูปร่าง: วงกลมและรูปหลายเหลี่ยม
• แก้ไขข้อบกพร่อง

สารบัญ

วิธีใช้

แอตทริบิวต์องค์ประกอบแผนที่

คุณลักษณะองค์ประกอบของเครื่องหมาย

คุณลักษณะองค์ประกอบรูปร่างวงกลม

คุณลักษณะองค์ประกอบรูปร่างรูปหลายเหลี่ยม

วิธีการสร้าง

ใบอนุญาต

วิธีใช้

รวมชุดบันเดิล LIT-GOOGLE-MAP ในไฟล์ HTML:

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

หรือรุ่นที่เล็กกว่า:

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

ใช้ส่วนประกอบในสถานที่ใด ๆ ที่คุณต้องการ (อย่าลืมเติมคีย์ API ของ Google Maps)::

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

นอกจากนี้คุณยังสามารถรวมเครื่องหมายแผนที่จำนวนใดก็ได้:

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

หรือ/และรูปร่าง:

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

แอตทริบิวต์องค์ประกอบแผนที่

• ' api -key ' - Google Map Api คีย์
• ' ภาษา ' - ภาษาแผนที่ Google (ไม่บังคับ)
• ' MAP -ID ' - Google MAP MAPID (ไม่บังคับ)
• ' เวอร์ชัน ' - Google แผนที่สคริปต์ js เวอร์ชันเพื่อโหลด (ค่าเริ่มต้น: '3.48')
• ' Styles ' - MAP Styles ในรูปแบบ JSON (ไม่บังคับ)
• ' ซูม ' - ระดับซูม (ค่าเริ่มต้น: '8')
• ' fit-to-markers'- พื้นที่แผนที่พอดีเพื่อแสดงเครื่องหมายทั้งหมด
• ' Map -type ' - ประเภทแผนที่ที่จะแสดง: 'Roadmap', 'Satellite', 'Hybrid', 'Terrain'
• ' Center-Latitude'- Latitude of Map จุดเริ่มต้นจุดกึ่งกลาง
• ' กึ่งกลางความยาว ' - ลองจิจูดของแผนที่จุดเริ่มต้นของแผนที่

ตัวอย่าง:

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

คุณลักษณะองค์ประกอบของเครื่องหมาย

• ' ละติจูด ' - ตำแหน่งละติจูดมาร์กเกอร์
• ' ลองจิจูด ' - ตำแหน่งลองจิจูดของมาร์กเกอร์
• ' ฉลาก ' - ฉลากเครื่องหมาย
• ' z -index ' - ดัชนี marker z
• ' ไอคอน ' - URL ICON ICON MARKER

ตัวอย่าง:

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

เครื่องหมายสามารถมี infowindow ที่เกี่ยวข้องกับเนื้อหา 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 > 

คุณลักษณะองค์ประกอบรูปร่างวงกลม

• ' Center -Latitude ' - ตำแหน่งละติจูด Circle Center
• ' กึ่งกลางความยาว ' - ตำแหน่งลองจิจูดกลางวงกลม
• ' Radius ' - Circle Radius (ค่าเริ่มต้น: 100000)
• ' สีเติม ' - วงกลมเติมสี
• ' เติมเต็มความสามารถ ' - วงกลมเติมความทึบ
• ' Stroke -Color ' - Circle Stroke Color
• ' Stroke -Opacity ' - Circle Stroke Opacity
• ' Stroke -Weight ' - Circle Stroke Weight

ตัวอย่าง:

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

คุณลักษณะองค์ประกอบรูปร่างรูปหลายเหลี่ยม

• ' Paths ' - Polygon Paths ชี้ในรูปแบบของ json array
• ' Fill -Color ' - Polygon Fill Color
• ' เติมเต็มความสามารถ ' - ความทึบของรูปหลายเหลี่ยมเติมเต็ม
• ' Stroke -Color ' - Polygon Stroke Color
• ' Stroke -Opacity ' - ความทึบของ Polygon Stroke
• ' Stroke -Weight ' - Polygon Stroke Weight

ตัวอย่าง:

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

วิธีการสร้าง

ก่อนสร้างติดตั้งแพ็คเกจที่จำเป็นทั้งหมด:

 npm install

Bare Build:

 npm run build

สร้างด้วยขั้นตอน Bundle:

 npm run bundle

ใบอนุญาต

มิกซ์