lit google map

Lit-google map

هذا المشروع هو منفذ WebComponce من 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 Maps 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 Key
• " لغة " - لغة خريطة Google (اختيارية)
• " معرف الخريطة " - Google Map Mapid (اختياري)
• " الإصدار " - إصدار برنامج Google MAP JS Script إلى (افتراضي: "3.48")
• " أنماط " - أنماط خريطة بتنسيق JSON (اختياري)
• " Zoom " - مستوى التكبير (الافتراضي: "8")
• " ملاءمة إلى علامات "-منطقة خريطة ملائمة لعرض جميع العلامات
• " نوع الخريطة " - نوع الخريطة لعرض: "خارطة الطريق" ، "القمر الصناعي" ، "الهجينة" ، "التضاريس"
• " خطوط العرض المركزية "- خط عرض الخريطة الأولي نقطة المركز
• " خط الوسط " - خط الطول من الخريطة الأولي نقطة المركز

مثال:

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

سمات عنصر العلامة

• " خط العرض " - وضع علامات العرض
• " خط الطول " - وضع علامات خط الطول
• " Label " - علامة علامة
• " Z -Index " - Marker Z Index
• ' icon ' - url صورة رمز علامة

مثال:

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

سمات عنصر شكل الدائرة

• " خطوط العرض المركزية " - موقف خط العرض Circle Center Center
• " خط الوسط " - موقف خط الطول في مركز الدائرة
• " دائرة نصف قطرها " - دائرة دائرة نصف قطرها (افتراضي: 100000)
• " ملء اللون " - لون ملء الدائرة
• " تعبئة التعتيم " - دائرة تعتيم الدائرة
• " بلون السكتة الدماغية " - لون السكتة الدماغية
• " سعة السكتة الدماغية " - عتامة الدائرة السكتة الدماغية
• " وزن السكتة الدماغية " - وزن السكتة الدماغية الدائرة

مثال:

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

سمات عنصر شكل المضلع

• " مسارات " - نقاط مسارات المضلع في شكل مجموعة JSON
• " ملء اللون " - لون ملء المضلع
• " التعبئة " - عتامة ملء المضلع
• " بلون السكتة الدماغية " - لون السكتة الدماغية
• " حسم السكتة الدماغية " - عتامة السكتة الدماغية المضلعة
• " وزن السكتة الدماغية " - وزن السكتة الدماغية المضلعة

مثال:

 < 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

بنية عارية:

 npm run build

بناء مع خطوة الحزمة:

 npm run bundle

رخصة

معهد ماساتشوستس للتكنولوجيا