توفر واجهة برمجة تطبيقات JavaScript للخرائط تطبيقين مختلفين للخريطة: النقطية والمتجه. يتم تحميل الخريطة النقطية تلقائيًا، وتُحمِّل الخريطة كشبكة من مربّعات الصور النقطية المستندة إلى وحدات البكسل، والتي تمّ إنشاؤها من جانب خادم "منصة خرائط Google" ، ثمّ يتم عرضها على تطبيق الويب. تتألّف خريطة المتّجهات من مربّعات تستند إلى مربّعات يتمّ رسمها أثناء العرض على جهة العميل باستخدام WebGL، وهي تقنية ويب تسمح للمستخدِم بالوصول إلى وحدة معالجة الرسومات على D2D والجهاز.
الخريطة المتجهة هي نفس خريطة 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');
}
});