Latest web development tutorials

خريطة جوجل الأغطية

إضافة علامة في خرائط Google


خرائط جوجل - الأغطية

تراكب هي كائنات منضمة إلى خط العرض / خط الطول الإحداثيات على الخريطة، السحب أو تكبير الخريطة سينتقل معك.

خرائط جوجل API هي تراكب التالية:

  • نشير باستخدام علامات على الخريطة لتظهر في كثير من الأحيان عرض رمز مخصص. علامات هي كائنات نوع GMarker، ويمكن استخدامها لتخصيص أنواع رمز الأجسام GIcon.
  • خطوط على الخريطة باستخدام الخطوط المتعددة (يمثل مجموعة من النقاط) ليتم عرضها. خط GPolyline من نوع الكائن.
  • يتم عرض المناطق على الخريطة كما المضلعات (إذا كانت المنطقة شكل تعسفي) أو تراكب السفلي (إذا كان مساحة مستطيلة). المضلع مماثل لشكل متعدد الخطوط مغلقة، يمكن أن يكون أي شكل. وتستخدم تركيبات الأرضية عادة لرسم خريطة للمنطقة مع البلاط المرتبطة بشكل مباشر أو غير مباشر.
  • يتم عرض الخريطة نفسها باستخدام تراكب البلاط. إذا كنت تملك سلسلة من البلاط، ويمكنك استخدام الطبقة GTileLayerOverlay لتغيير البلاط الموجودة على الخريطة، يمكنك حتى استخدام GMapType لإنشاء أنواع خريطة الخاصة بك.
  • نافذة المعلومات هو أيضا نوع خاص من تراكب. علما، مع ذلك، سيتم إضافة إطار المعلومات تلقائيا إلى الخريطة، والخريطة يمكن إضافة نوع واحد فقط وجوه GInfoWindow.

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

وتحدد الخريطة النقاط على السجل. افتراضيا، فإنها تستخدم G_DEFAULT_ICON (يمكنك أيضا تحديد رمز مخصص). GMarker منشئ GLatLng وGMarkerOptions (اختياري) كائن كمعلمة.

الكلمات مصممة لتكون تفاعلية. على سبيل المثال، افتراضيا، أنها تتلقى "فوق" الأحداث، وغالبا ما تستخدم لفتح نافذة المعلومات في المستمعين الحدث.

بواسطة setMap () طريقة لإضافة علامات على الخريطة:

أمثلة

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

marker.setMap(map);

محاولة »


خرائط جوجل - علامة القابلة للسحب

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

أمثلة

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

محاولة »


خرائط جوجل - شكل متعدد الخطوط

كائن GPolyline يمكن إنشاء تراكب الخطية على الخريطة. تشمل GPolyline سلسلة من النقاط ويخلق سلسلة من خطوط منتظمة تربط هذه النقاط.

شكل متعدد الخطوط يدعم السمات التالية:

  • مسار - تحديد أكثر من سطر واحد من إحداثيات خطوط الطول / العرض
  • strokeColor - تحدد قيمة لون ست عشرية من خط (تنسيق: "# FFFFFF")
  • strokeOpacity - الشفافية خط المعينة (قيمة 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
});

محاولة »


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

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

والخط، يمكنك تخصيص اللون والشفافية المضلع حواف (خطوط) لون، سماكة وشفافية، فضلا عن إغلاق منطقة شغلها. يجب أن تكون الألوان في عشري نمط HTML الرقمية.

مضلع يدعم السمات التالية:

  • مسار - تحديد متعددة إحداثيات خطي العرض (الإحداثيات الأولى والأخيرة هي متساوية)
  • strokeColor - تحدد قيمة لون ست عشرية من خط (تنسيق: "# FFFFFF")
  • strokeOpacity - الشفافية خط المعينة (قيمة 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")
  • strokeOpacity - الشفافية قوس المعينة (قيمة 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
});

محاولة »


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

على علامة لعرض إطار رسالة نصية:

أمثلة

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

infowindow.open(map,marker);

محاولة »


خرائط جوجل - الدليل المرجعي تراكب

خرائط جوجل API دليل المرجعي .