طبقات خريطة جوجل

خريطة جوجل - الغطاء

الغطاء هو كائن موصوف على الخريطة يربط بالإحداثيات العلوية والعمودية.

يوجد أنواع متعددة من الغطاءات في خريطة جوجل:

• علامة (Marker) - موقع واحد على الخريطة. يمكن للعلامة أيضًا عرض صورة شعار مخصصة
• خط متقطع (Polyline) - سلسلة من الخطوط على الخريطة
• مضلع (Polygon) - سلسلة من الخطوط على الخريطة، تكون شكلها "مغلقًا"
• الدوائر والمربعات (Circle و Rectangle)
• نافذة المعلومات (Info Windows) - عرض المحتوى في بالون النافذة في أعلى الخريطة
• الغطاء المخصص (Custom overlays)

خريطة جوجل - إضافة العلامة

يمكن للوظيفة Marker إنشاء علامة. يرجى ملاحظة أنه يجب تعيين خاصية position لتظهر العلامة.

يرجى استخدام طريقة setMap() لوضع العلامة على الخريطة:

مثال

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

خريطة جوجل - حركة العلامة

في المثال التالي يتم عرض كيفية استخدام خاصية animation لضبط الحركة على العلامة:

مثال

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

خريطة جوجل - استبدال العلامة بالشعار

في المثال التالي يتم تحديد الصورة (الشعار) التي سيتم استخدامها لت替代 العلامة الافتراضية:

مثال

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

خريطة جوجل - خط متقطع

يتم رسم الخط المتقطع كخط يتم رسمه عن طريق سلسلة من الإحداثيات مرتبة بالترتيب.

يدعم الخط المتقطع الخاصية التالية:

• path - تحديد بعض من الإحداثيات العلوية والعمودية للخط
• strokeColor - تحديد لون الخط بتنسيق الـ Hexadecimal (نمط: "#FFFFFF")
• strokeOpacity - تحديد شفافية الخط (قيمة بين 0.0 و 1.0)
• strokeWeight - تحديد سمك خط اللون (بأseinترات)
• editable - تحديد ما إذا كان بإمكان المستخدم تعديل الخط (true/false)

مثال

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

خرائط جوجل - دائرة مضلعة

الدوائر المضلعة تشبه الشكل المائل، وتتكون من مجموعة من الإحداثيات المترتبة بالترتيب. ومع ذلك، يتم تصميم الدوائر المضلعة لتعريف المنطقة المغلقة.

الدوائر المضلعة تتكون من خطوط وتكون شكلها "مغلق" (كل الخطوط متصلة)

الدوائر المضلعة تدعم الخاصيات التالية:

• path - تحديد مجموعة من الإحداثيات العرصية والجغرافية للخط (الإحداثيات الأولى والأخيرة متطابقة)
• strokeColor - تحديد لون الخط بتنسيق الـ Hexadecimal (نمط: "#FFFFFF")
• strokeOpacity - تحديد شفافية الخط (قيمة بين 0.0 و 1.0)
• strokeWeight - تحديد سمك خط اللون (بأseinترات)
• fillColor - تحديد لون المملأ للمنطقة المغلقة بتنسيق الـ Hexadecimal (نمط: "#FFFFFF")
• fillOpacity - تحديد شفافية اللون المملأ (قيمة بين 0.0 و 1.0)
• editable - تحديد ما إذا كان بإمكان المستخدم تعديل الخط (true/false)

مثال

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

خرائط جوجل - دائرة

الدائرة تدعم الخاصيات التالية:

• center - تحديد مركز الدائرة باستخدام google.maps.LatLng
• radius - تحديد قطر الدائرة بالأمتر
• strokeColor - تحديد لون الخط حول الدائرة بتنسيق الـ Hexadecimal (نمط: "#FFFFFF")
• strokeOpacity - تحديد شفافية اللون للخط (قيمة بين 0.0 و 1.0)
• strokeWeight - تحديد سمك خط اللون (بأseinترات)
• fillColor - تحديد لون المملأ للدائرة بتنسيق الـ Hexadecimal (نمط: "#FFFFFF")
• fillOpacity - تحديد شفافية اللون المملأ (قيمة بين 0.0 و 1.0)
• editable - تحديد ما إذا كان بإمكان المستخدم تعديل دائرة (true/false)

مثال

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

خرائط جوجل - نافذة معلومات

لعرض نافذة معلومات تحتوي على نص على علامة الموقع المحددة:

مثال

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);