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

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

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

بدء استخدام Vector Maps

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

استخدِم الدالة 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');
  }
});