خرائط الموجّه

توفر واجهة برمجة تطبيقات جافا سكريبت للخرائط تطبيقين مختلفين للخريطة: خطوط نقطية ومتجه. يتم تحميل الخريطة النقطية تلقائيًا، ويتم تحميل الخريطة كشبكة من مربعات الصور النقطية المستندة إلى وحدات البكسل، والتي يتم إنشاؤها من جانب الخادم في نظام خرائط Google، ثم يتم عرضها لتطبيق الويب. وتتكون خريطة المتجه من مجموعة من المربعات المتجهة، والتي يتم رسمها في وقت التحميل من جانب العميل باستخدام WebGL، وهي تقنية ويب تتيح للمتصفح الدخول إلى وحدة معالجة الرسومات على جهاز العرض 3 على جهاز العرض 3.

الخريطة المتجهة هي نفس خريطة Google التي يألفها المستخدمون جيدًا، وتقدم عددًا من المزايا التي تتفوق على خريطة المربعات النقطية الافتراضية، وعلى الأخص درجة حدة الصور التي تستند إلى المتجهات، وإضافة المباني ثلاثية الأبعاد بمستويات تكبير تقريبية. تدعم خريطة المتجهات أيضًا بعض الميزات الجديدة، مثل القدرة على إضافة محتوى ثلاثي الأبعاد باستخدام عرض WebGL المركب، والتحكم الآلي في الإمالة والعنوان، والتحكم المحسّن في الكاميرا، والتكبير/التصغير الجزئي للتكبير/التصغير بشكل أكثر سلاسة.

بدء استخدام خرائط المتجهات

التحكم في الكاميرا

استخدِم الدالة map.moveCamera() لتعديل أي مجموعة من خصائص الكاميرا في آنٍ واحد. تقبل map.moveCamera() معلمة واحدة تحتوي على جميع خصائص الكاميرا المراد تحديثها. يوضّح المثال التالي الاتصال بالرقم map.moveCamera() لضبط center وzoom وheading وtilt في آنٍ واحد:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

يمكنك تحريك خصائص الكاميرا من خلال استدعاء map.moveCamera() بحلقة رسوم متحركة، كما هو موضح هنا:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

تكبير/تصغير نصي

تدعم خرائط المتجهات التكبير أو التصغير الجزئي، الذي يسمح لك بالتكبير باستخدام قيم كسور بدلاً من الأعداد الصحيحة. بينما تعمل كل من الخرائط النقطية والمتّجهات مع إمكانية التكبير/التصغير الجزئي، تكون ميزة التكبير أو التصغير الجزئي مفعّلة تلقائيًا في الخرائط المتّجهية وإيقافها تلقائيًا في الخرائط النقطية. استخدم خيار الخريطة isFractionalZoomEnabled لتفعيل التكبير/التصغير الكسري وإيقافه.

يوضح المثال التالي تمكين التكبير أو التصغير الجزئي عند تهيئة الخريطة:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

يمكنك أيضًا تشغيل التكبير/التصغير الجزئي أو إيقافه عن طريق تعيين خيار الخريطة isFractionalZoomEnabled كما هو موضح هنا:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

يمكنك ضبط أداة استماع لاكتشاف ما إذا كانت ميزة التكبير أو التصغير الجزئي مفعّلة، ويكون ذلك أكثر فائدة إذا لم يتم ضبط isFractionalZoomEnabled صراحة على true أو false. يتحقق المثال التالي من الشفرة لمعرفة ما إذا كانت ميزة التكبير/التصغير الجزئي ممكّنة:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});