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