تراكبات خرائط جوجل
خرائط جوجل - تراكبات
التراكبات هي كائنات على الخريطة مرتبطة بإحداثيات خطوط الطول / العرض.
تحتوي خرائط Google على عدة أنواع من التراكبات:
- محدد الموقع - مواقع فردية على الخريطة. يمكن للعلامات أيضًا عرض صور الرموز المخصصة
- متعدد الخطوط - سلسلة من الخطوط المستقيمة على الخريطة
- المضلع - سلسلة من الخطوط المستقيمة على الخريطة ، والشكل "مغلق"
- الدائرة والمستطيل
- نوافذ المعلومات - تعرض المحتوى داخل بالون منبثق أعلى الخريطة
- تراكبات مخصصة
خرائط جوجل - أضف علامة
ينشئ مُنشئ العلامة علامة. لاحظ أنه يجب تعيين خاصية الموضع لعرض العلامة.
أضف العلامة إلى الخريطة باستخدام طريقة setMap ():
مثال
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
خرائط جوجل - حرك العلامة
يوضح المثال أدناه كيفية تحريك العلامة باستخدام خاصية الرسوم المتحركة:
مثال
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);
خرائط جوجل - Polyline
الخط متعدد الخطوط هو خط يتم رسمه من خلال سلسلة من الإحداثيات في تسلسل مرتب.
يدعم الخط المتعدد الخصائص التالية:
- المسار - يحدد العديد من إحداثيات خطوط الطول / العرض للخط
- strokeColor - تحدد لونًا سداسيًا عشريًا للخط (التنسيق: "#FFFFFF")
- حد السكتة الدماغية - يحدد عتامة الخط (قيمة بين 0.0 و 1.0)
- strokeWeight - يحدد وزن حد الخط بالبكسل
- قابل للتحرير - يحدد ما إذا كان السطر قابلاً للتحرير بواسطة المستخدمين (صواب / خطأ)
مثال
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
خرائط جوجل - مضلع
يشبه المضلع الشكل متعدد الخطوط من حيث أنه يتكون من سلسلة من الإحداثيات في تسلسل مرتب. ومع ذلك ، تم تصميم المضلعات لتحديد المناطق داخل حلقة مغلقة.
تتكون المضلعات من خطوط مستقيمة ، والشكل "مغلق" (كل الخطوط متصلة ببعضها البعض).
يدعم المضلع الخصائص التالية:
- المسار - يحدد العديد من إحداثيات LatLng للخط (الإحداثي الأول والأخير متساويان)
- strokeColor - تحدد لونًا سداسيًا عشريًا للخط (التنسيق: "#FFFFFF")
- حد السكتة الدماغية - يحدد عتامة الخط (قيمة بين 0.0 و 1.0)
- strokeWeight - يحدد وزن حد الخط بالبكسل
- fillColor - يحدد لون سداسي عشري للمنطقة المغلقة (التنسيق: "#FFFFFF")
- fillOpacity - يحدد عتامة لون التعبئة (قيمة بين 0.0 و 1.0)
- قابل للتحرير - يحدد ما إذا كان السطر قابلاً للتحرير بواسطة المستخدمين (صواب / خطأ)
مثال
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
});
خرائط جوجل - الدائرة
تدعم الدائرة الخصائص التالية:
- المركز - يحدد google.maps.LatLng لمركز الدائرة
- نصف القطر - يحدد نصف قطر الدائرة بالأمتار
- strokeColor - تحدد لونًا سداسيًا عشريًا للخط المحيط بالدائرة (التنسيق: "#FFFFFF")
- StrOpacity - تحدد عتامة لون الحد (قيمة بين 0.0 و 1.0)
- strokeWeight - يحدد وزن حد الخط بالبكسل
- fillColor - يحدد لون سداسي عشري للمنطقة داخل الدائرة (التنسيق: "#FFFFFF")
- fillOpacity - يحدد عتامة لون التعبئة (قيمة بين 0.0 و 1.0)
- قابل للتحرير - يحدد ما إذا كانت الدائرة قابلة للتعديل بواسطة المستخدمين (صواب / خطأ)
مثال
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
خرائط جوجل - InfoWindow
إظهار InfoWindow مع بعض محتوى النص لعلامة:
مثال
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);