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

تقدّم واجهة برمجة التطبيقات Maps JavaScript API طريقتَين مختلفتَين لتنفيذ الخريطة: Raster وVector. يتم تحميل الخريطة النقطية تلقائيًا، ويتم تحميلها كشبكة من ملفّات تعريف الصور النقطية المستندة إلى البكسل، والتي يتم إنشاؤها من خلال "منصّة خرائط Google" على جانب الخادم، ثم يتم عرضها على تطبيق الويب. تتألّف الخريطة المتجهّة من ملفّات تعريف المتجهات التي يتم رسمها في وقت التحميل على جانب العميل باستخدام WebGL، وهي تقنية ويب تسمح للمتصفّح بالوصول إلى وحدة معالجة الرسومات على جهاز المستخدم لعرض الرسومات ثنائية وثلاثية الأبعاد.

الخريطة المستندة إلى الأشكال الهندسية هي خريطة 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');
  }
});