خرائط جوجل - تراكب
التراكب هو كائن مرتبط بتنسيق خط الطول/خطوط الطول على الخريطة وسيتحرك أثناء سحب الخريطة أو تكبيرها.
تحتوي واجهة برمجة تطبيقات خرائط Google على التراكبات التالية:
1. يتم عرض النقاط الموجودة على الخريطة باستخدام علامات ، وعادة ما يتم عرض الرموز المخصصة. العلامة هي كائن من نوع gmarker ، ويمكن تخصيص الرمز باستخدام كائن من النوع giCon.
2. يتم عرض الخطوط الموجودة على الخريطة باستخدام بوليلين (تمثل مجموعة من النقاط). الخط هو كائن من النوع gpolyline.
3. يتم عرض المنطقة الموجودة على الخريطة على أنها مضلع (إذا كان شكلًا تعسفيًا) أو تراكب سطح أسفل (إذا كانت مساحة مستطيلة). يشبه المضلع خطًا مغلقًا ، لذلك يمكن أن يكون أي شكل. عادة ما تستخدم التراكبات الأرضية على الخريطة التي لها ارتباطات مباشرة أو غير مباشرة مع البلاط.
4. يتم عرض الخريطة نفسها باستخدام تراكبات البلاط. إذا كان لديك سلسلة من البلاط الخاصة بك ، فيمكنك استخدام فئة GtiLelayerOverlay لتغيير البلاط لديك بالفعل على الخريطة ، أو حتى استخدام GMAPType لإنشاء نوع الخريطة الخاص بك.
5. نافذة المعلومات هي أيضًا طبقة تراكب خاصة. ومع ذلك ، يرجى ملاحظة أن نافذة المعلومات تتم إضافة تلقائيًا إلى الخريطة ، ويمكن للخريطة إضافة كائن واحد فقط من نوع GinFowindow.
خرائط Google - إضافة علامات
ضع علامة على النقاط على الخريطة. بشكل افتراضي ، يستخدمون g_default_icon (يمكنك أيضًا تحديد أيقونات مخصصة). يأخذ مُنشئ Gmarker الكائنات Glatlng و GmarkerOptions (اختيارية) كمعلمات.
تم تصميم العلامات لتكون تفاعلية. على سبيل المثال ، بشكل افتراضي يتلقون أحداث "انقر فوق" ، والتي يتم استخدامها غالبًا لفتح Windows في مستمعي الأحداث.
أضف علامة على الخريطة عبر طريقة setMap ():
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ تهيئة الدالة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getelementById ( google.maps.marker ({الموضع: myCenter ،}) ؛ marker.setmap (map) ؛} google.maps.event.adddomlistener (window ، 'load' ، initive) ؛ </script> </head> <body> <div id = "googlemap"> </div> </html>مثال على التقديم:
خرائط Google - علامات السحب
يصف المثال التالي كيفية استخدام خاصية الرسوم المتحركة لسحب علامة:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ var marker ؛ وظيفة تهيئة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new map = new ؛ google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛ marker = new Google.maps.marker ({position: myCenter ، الرسوم المتحركة: google.maps.animation.bounce}) ؛ marker.setmap (map) ؛ id = "googlemap"> </viv> </body> </html>خرائط Google - أيقونة
يمكن عرض العلامات باستخدام أيقونة جديدة مخصصة بدلاً من الرمز الافتراضي:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ تهيئة الدالة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getelementById ( google.maps.marker ({position: myCenter ، icon: 'pinkball.png'}) ؛ marker.setmap (map) ؛} google.maps.event.adddomlistener (window ، 'load' ، initive) ؛ </script> </head> <body>خرائط Google - خطوط قابلة للطي
كائنات gpolyline إنشاء تراكبات خطية على الخرائط. يتضمن Gpolyline سلسلة من النقاط وإنشاء سلسلة من قطاعات الخط التي تربط هذه النقاط بطريقة منظمة.
تدعم بوليلين الخصائص التالية:
المسار - يحدد إحداثيات خط العرض/خط الطول لخطوط مستقيمة متعددة
StrokeColor - يحدد قيمة الألوان السداسية السداسية للخط (التنسيق: "#ffffff")
السكتة الدماغية - يحدد شفافية الخط (القيمة هي 0.0 إلى 1.0)
وزن السكتة الدماغية - يحدد عرض الخط بالبكسل.
قابلة للتحرير - يحدد ما إذا كان يمكن للمستخدم تحرير خط مستقيم (صحيح/خطأ)
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> var x = new google.maps.latlng (52.395715،4.888916) ؛ var stavanger = جديد google.maps.latlng (58.983991،5.734863) ؛ var amsterdam = new Google.Maps.latlng (52.395715،4.888916) google.maps.latlng (51.508742 ، -0.120850) ؛ وظيفة تهيئة () {var mapprop = {center: x ، Zoom: 4 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛ var mytrip = [Stavanger ، Amsterdam ، London] ؛ var flightPath = new Google.maps.polyline ({path: mytrip ، strokecolor: }).مثال على التقديم:
خرائط Google - المضلعات
تشبه كائنات gpolygon كائنات gpolyline من حيث أنها جميعها تتضمن سلسلة من النقاط المطلوبة. ومع ذلك ، بدلاً من وجود نقطتين نهائيتين مثل بوليلين ، تم تصميم المضلعات لتحديد المناطق التي تشكل حلقات مغلقة.
مثل polylines ، يمكنك تخصيص اللون وسمك وشفافية حواف المضلع (الخطوط) ، وكذلك لون وشفافية مناطق التعبئة المغلقة. يجب أن يكون اللون في نمط HTML العدد السداسي.
تدعم المضلعات الخصائص التالية:
PATH - يحدد إحداثيات خطوط عرض خطوط خط مستقيم متعددة (الإحداثيات الأولى والأخيرة متساوية)
StrokeColor - يحدد قيمة الألوان السداسية السداسية للخط (التنسيق: "#ffffff")
السكتة الدماغية - يحدد شفافية الخط (هذه القيمة هي 0.0 إلى 1.0)
وزن السكتة الدماغية - يحدد عرض الخط بالبكسل.
FillColor - يحدد قيمة الألوان السداسية للمنطقة المغلقة (التنسيق: "#ffffff")
Folleopacity - يحدد شفافية لون التعبئة (القيمة من 0.0 إلى 1.0)
قابلة للتحرير - يحدد ما إذا كان يمكن للمستخدم تحرير خط مستقيم (صحيح/خطأ)
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> var x = new google.maps.latlng (52.395715،4.888916) ؛ var stavanger = جديد google.maps.latlng (58.983991،5.734863) ؛ var amsterdam = new Google.Maps.latlng (52.395715،4.888916) google.maps.latlng (51.508742 ، -0.120850) ؛ وظيفة تهيئة () {var mapprop = {center: x ، Zoom: 4 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getElementById ("googlemap") ، mapprop) ؛ var mytrip = [Stavanger ، Amsterdam ، London ، Stavanger] ؛ var flightpath = new Google.Maps.polygon ({path: mytrip ، strokecolor: fillColor: "#0000ff" ، follopacity: 0.4}) ؛ flightPath.setMap (map) ؛} google.maps.event.adddomlistener (window ، 'load' ، initialize) ؛ </script> </head>مثال على التقديم:
خرائط Google - Circle
تدعم الدوائر الخصائص التالية:
المركز - حدد المعلمة النقطة المركزية لـ Circle google.maps.latlng
دائرة نصف قطرها - يحدد نصف قطر الدائرة بالأمتار
StrokeColor - يحدد قيمة اللون السداسي عشر للقوس (التنسيق: "#ffffff")
السكتة الدماغية - يحدد شفافية القوس (القيمة من 0.0 إلى 1.0)
وزن السكتة الدماغية - يحدد عرض الخط بالبكسل.
FillColor - يحدد قيمة ملء قيمة الألوان السداسية للدائرة (التنسيق: "#ffffff")
Folleopacity - يحدد شفافية لون التعبئة (القيمة من 0.0 إلى 1.0)
يحدد ما إذا كان يمكن للمستخدم تحرير خط مستقيم (صحيح/خطأ)
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> var amsterdam = new google.maps.latlng (52.395715،4.888916) ؛ وظيفة تهيئة () {var mapprop = {center: amsterdam ، Zoom: 7 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛ var mycity = new Google.maps.circle ({center: amsterdam ، radius: 20000 ، strokecolor: "#0000ff" ، strokeopacity: 0.8 ، 2 ، fillcolor: }) ؛ mycity.setmap (map) ؛} google.maps.event.adddomlistener (نافذة ، "تحميل" ، تهيئة) ؛ </script> </head> <body> <div id = "googlemap"> </viv>مثال على التقديم:
خرائط Google - نافذة المعلومات
عرض نافذة رسالة نصية على علامة:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> <script> var my google.maps.latlng (51.508742 ، -0.120850) ؛ تهيئة الدالة () {var mapprop = {center: myCenter ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new google.maps.map (document.getelementById ( google.maps.marker ({الموضع: myCenter ،}) ؛ marker.setmap (map) ؛ var infowindow = new Google.Maps.infowindow ({content: "hello world! id = "googlemap"> </viv> </body> </html>مثال على التقديم:
ما سبق هو عبارة عن مجموعة من المعلومات حول تراكب خرائط Google. سوف نستمر في إضافته لاحقًا. شكرا لك على دعمك لهذا الموقع!