أحدث البرامج التعليمية وتطوير الشبكة
 

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

❮ السابق التالي الفصل ❯

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

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

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

خرائط جوجل لديها عدة أنواع من تراكب:

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

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

منشئ ماركر يخلق علامة. (لاحظ أن الخاصية موقف يجب تعيين لعلامة لعرض).

إضافة علامة على الخريطة باستخدام 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);
انها محاولة لنفسك »

خرائط جوجل - أيقونة بدلا من ماركر

يحدد المثال أدناه صورة (icon) لاستخدامها بدلا من علامة الافتراضي:

مثال

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

marker.setMap(map);
انها محاولة لنفسك »

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

شكل متعدد الخطوط هو خط التي يتم رسمها من خلال سلسلة من الإحداثيات في تسلسل أمر.

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

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

مثال

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});
انها محاولة لنفسك »

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

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

مصنوعة المضلعات من الخطوط المستقيمة، والشكل هو "closed" (جميع خطوط الاتصال متابعة).

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

  • مسار - يحدد العديد من خط الطول والعرض إحداثيات خط (أولا وأخيرا تنسيق سواسية)
  • strokeColor - يحدد اللون عشري للخط (format: "#FFFFFF")
  • strokeOpacity - يحدد تعتيم الخط (قيمة بين 0.0 و 1.0)
  • strokeWeight - يحدد الوزن من السكتة الدماغية الخط في بكسل
  • FILLCOLOR - يحدد اللون السداسية العشرية لمنطقة داخل المنطقة المغلقة (format: "#FFFFFF")
  • fillOpacity - يحدد عتامة لون التعبئة (قيمة بين 0.0 و 1.0)
  • للتحرير - يحدد ما إذا كان الخط هو للتحرير من قبل المستخدمين (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
});
انها محاولة لنفسك »

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

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

  • مركز - يحدد google.maps.LatLng من مركز الدائرة
  • دائرة نصف قطرها - يحدد نصف قطر الدائرة، في متر
  • strokeColor - يحدد اللون عشري للخط حول الدائرة (format: "#FFFFFF")
  • strokeOpacity - يحدد عتامة اللون السكتة الدماغية (قيمة بين 0.0 و 1.0)
  • strokeWeight - يحدد الوزن من السكتة الدماغية الخط في بكسل
  • FILLCOLOR - يحدد اللون عشري للمنطقة ضمن دائرة (format: "#FFFFFF")
  • fillOpacity - يحدد عتامة لون التعبئة (قيمة بين 0.0 و 1.0)
  • للتحرير - يحدد ما إذا كانت الدائرة هي قابلة للتحرير من قبل المستخدمين (true/false)

مثال

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);
انها محاولة لنفسك »

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

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


❮ السابق التالي الفصل ❯