أساسيات خرائط جوجل
إنشاء خريطة Google بسيطة
الآن دعنا ننشئ خريطة Google بسيطة.
فيما يلي خريطة Google تعرض لندن ، المملكة المتحدة:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 5 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new Google.maps.map (document.getElementByid ("googlemap") ، mapprop) ؛ تهيئة) ؛ </script> </head> <body> <div id = "googlemap"> </viv> </body> </html>مثال على الإضافات (يمكن نسخها وتشغيلها مباشرة ، بالطبع يجب أن تكون قادرًا على الوصول إلى Google)
مثال تحليل
نستخدم المثال أعلاه لتحليل عملية إنشاء خرائط Google.
لماذا يعلن الطلب HTML5؟
<! doctype html>
تستخدم معظم المتصفحات صفحات تقديم مستندات HTML5 "الوضع القياسي" ، مما يعني أن تطبيقك متوافق مع المتصفحات الرئيسية.
بالإضافة إلى ذلك ، إذا لم يكن هناك علامة doctype ، يستخدم المتصفح وضع المراوغات لتقديم محتوى الصفحة.
نصيحة: تجدر الإشارة إلى أنه لا يمكن استخدام بعض "الوضع المذهل" CSS مع الوضع القياسي. في تطبيقات محددة ، يجب أن تكون جميع الأحجام المستندة إلى النسبة المئوية موروثة من عنصر الكتلة الأصل. إذا لم يتم تحديد حجم في الوحدة النمطية الأصل ، فإن القيمة الافتراضية هي 0 × 0 بكسل. إذا كنت ترغب في استخدام النسب المئوية ، فيمكنك إعلانها في علامة <Style> على النحو التالي:
<style type = "text/css"> html {الارتفاع: 100 ٪} الجسم {الارتفاع: 100 ٪ ؛ الهامش: 0 ؛ حشوة: 0} #googlemap {الارتفاع: 100 ٪} </style>يشير بيان النمط هذا إلى أن وحدة MAP (googlemap) يجب أن يكون لها ارتفاع HTML 100 ٪.
أضف مفتاح API خرائط Google
يجب تضمين واجهة برمجة تطبيقات خرائط Google في علامة <script> الأولى في المثال التالي:
<script src = "http://maps.googleapis.com/maps/api/js؟key=your_api_key&sensor=true_or_false"> </script>
ضع مفتاح API الذي تم إنشاؤه بواسطة Google في المعلمة المفتاح (Key = Your_api_key).
مطلوب معلمة المستشعر ، مما يشير إلى ما إذا كان التطبيق يستخدم مستشعر (على غرار التنقل GPS) لتحديد موقع المستخدم. يمكن ضبط قيمة المعلمة على صواب أو خطأ.
https
إذا كان التطبيق الخاص بك هو تطبيق HTTP (HTTPS: HTTP Secure) ، فيمكنك استخدام HTTPS لتحميل واجهة برمجة تطبيقات خرائط Google:
<script src = "https://maps.googleapis.com/maps/api/js؟key=your_api_key&sensor=true_or_false"> </script>
تحميل غير متزامن
وبالمثل ، يمكننا تحميل واجهة برمجة تطبيقات خرائط Google بعد تحميل الصفحة بالكامل.
يستخدم المثال التالي window.onload لتحقيق تحميل كامل لخرائط Google. تقوم دالة LoadScript () بإنشاء علامة MAPS MAPS API <cript>. بالإضافة إلى ذلك ، تتم إضافة معلمة رد الاتصال = تهيئة في نهاية العلامة. سيتم تنفيذ عملية التهيئة () كدالة رد الاتصال بعد تحميل API بالكامل:
مثال
<! doctype html> <html> <head> <script> تهيئة () {var mapprop = {center: new Google.Maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، maptypeid: google.mapt.maptypeid.oudmap} ؛ var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛} function loadscript () {var script = document.createElement ("script") ؛ script.type = "text/javaScript" ؛ script.src = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kjitpvd2u7atoawhc9ysh6ohxoim&sensor=false&callback=initialize" ؛ document.body.appendchild (script) ؛} window.onload = loadscript ؛ </script> </head> <body> <div id = "googlemap"> </viv> </body> </html>تحديد خصائص الخريطة
قبل تهيئة الخريطة ، نحتاج إلى إنشاء كائن خاصية خريطة لتحديد بعض خصائص الخريطة:
var mapprop = {center: new Google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، maptypeid: google.maps.maptypeid.roadmap} ؛المركز (المركز)
تحدد الخاصية المركزية مركز الخريطة ، الذي ينشئ نقطة مركزية على الخريطة من خلال الإحداثيات (خط العرض ، خط الطول).
Zoom (سلسلة التكبير)
تحدد خاصية Zoom نطاق التكبير للخريطة. التكبير: 0 يوضح التكبير الكامل لخريطة الأرض بأكملها.
maptypeid (النوع الأولي للخريطة)
تحدد خاصية MAPTYPEID النوع الأولي للخريطة.
يتضمن Maptypeid الأنواع الأربعة التالية:
google.maps.maptypeid.hybrid: الطبقة الشفافة الشارع الرئيسية التي تعرض صورة الأقمار الصناعية
google.maps.maptypeid.roadmap: عرض خريطة الشارع العادية
google.maps.maptypeid.satellite: عرض صورة الأقمار الصناعية
google.maps.maptypeid.terrain: عرض الخرائط مع ميزات طبيعية مثل التضاريس والغطاء النباتي
مكان عرض خرائط Google
عادةً ما يتم استخدام خرائط Google في <Div> عناصر:
<div id = "googlemap"> </viv>
ملاحظة: ستعرض الخريطة حجم الخريطة بالحجم المحدد في DIV ، حتى نتمكن من ضبط حجم الخريطة في عنصر <viv>.
إنشاء كائن خريطة
var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛
يستخدم الرمز أعلاه المعلمة (MAPPROP) لإنشاء خريطة جديدة في عنصر <viv> (المعرف هو googlemap).
نصيحة: إذا كنت ترغب في إنشاء خرائط متعددة على الصفحة ، فأنت بحاجة فقط إلى إضافة كائن خريطة جديد.
يحدد المثال التالي أربع حالات خريطة (تستخدم أربع خرائط أنواعًا مختلفة من الخرائط):
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 9 ، maptypeid: google.maps.maptypeid.roadmap} ؛ var mapProp2 = {center: new Google.Maps.latlng (51.508742 ، -0.120850) ، Zoom: 9 ، maptypeid: google.maps.maptypeid.satellite} ؛ var mapProp3 = {center: new Google.Maps.latlng (51.508742 ، -0.120850) ، Zoom: 9 ، maptypeid: google.maps.maptypeid.hybrid} ؛ var mapProp4 = {center: new Google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 9 ، maptypeid: google.maps.maptypeid.terrain} ؛ var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛ var map2 = new Google.maps.map (document.getElementById ("googlemap2") ، mapProp2) ؛ var map3 = جديد google.maps.map (document.getElementById ("googlemap3") ، mapProp3) ؛ var map4 = new Google.maps.map (document.getElementById ("googlemap4") ، mapProp4) ؛} google.maps.event.adddomlistener (window ، 'load' ، initive) ؛ </script> </head> <body> <body> <googlemap " id = "googlemap3"> </viv> <br> <div id = "googlemap4"> </viv> </body> </html>تحميل الخريطة
بعد تحميل النافذة ، يتم تهيئة كائن الخريطة عن طريق تنفيذ وظيفة التهيئة () ، مما يضمن تحميل خرائط Google بعد تحميل الصفحة بالكامل:
google.maps.event.adddomlistener (نافذة ، "تحميل" ، تهيئة) ؛
ما سبق هو مجموعة من المعلومات الأساسية لخرائط Google. سوف نستمر في إضافته لاحقًا. شكرا لك على دعمك لهذا الموقع!