عناصر الخريطة الاتجاهية

عرض عيّنة

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

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

• التحكّم الآلي في الميل والاتجاه
• عناصر تحكّم محسّنة في الكاميرا
• التكبير/التصغير الكسري لإجراء عملية تكبير/تصغير أكثر سلاسة

• المحتوى الثلاثي الأبعاد والصور المتحركة

• بالنسبة إلى الخرائط التي يتم تحميلها باستخدام عنصر div وJavaScript، يكون نوع المعالجة التلقائي هو google.maps.RenderingType.RASTER.

• بالنسبة إلى الخرائط التي يتم تحميلها باستخدام العنصر gmp-map، يكون نوع العرض التلقائي هو google.maps.RenderingType.VECTOR، مع تفعيل التحكّم في الميل والاتجاه.

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

الميل والدوران

يمكنك ضبط الميل والدوران (الاتجاه) في الخريطة المتجهّة من خلال تضمين السمتَين heading وtilt عند إعداد الخريطة، ومن خلال استدعاء الطريقتَين setTilt وsetHeading على الخريطة. في المثال التالي، تتم إضافة بعض الأزرار إلى الخريطة التي تعرض تعديل الميل والاتجاه آليًا بزيادات قدرها 20 درجة.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

استخدام إيماءات الماوس ولوحة المفاتيح

إذا تم تفعيل تفاعلات المستخدمين مع الميل والدوران (العنوان) (إما برمجيًا أو في Google Cloud Console)، يمكن للمستخدمين ضبط الميل والدوران باستخدام الماوس ولوحة المفاتيح:

• باستخدام الماوس، اضغط مع الاستمرار على مفتاح Shift، ثم انقر واسحب الماوس للأعلى وللأسفل لضبط الميل، ولليمين ولليسار لضبط العنوان.
• باستخدام لوحة المفاتيح، اضغط مع الاستمرار على مفتاح Shift، ثم استخدِم مفاتيح الأسهم المتّجهة للأعلى وللأسفل لضبط الميل، ومفاتيح الأسهم المتّجهة لليسار ولليمين لضبط الوجهة.

تعديل الميل والعنوان آليًا

استخدِم الطريقتَين setTilt() وsetHeading() لضبط الميل والاتجاه آليًا على خريطة متّجهية. العنوان هو اتجاه الكاميرا بالدرجات باتجاه عقارب الساعة بدءًا من الشمال، لذا سيؤدي map.setHeading(90) إلى تدوير الخريطة لكي يكون الشرق في الأعلى. يتم قياس زاوية الميل من الذروة، لذا فإنّ map.setTilt(0) ينظر مباشرةً إلى الأسفل، في حين سيؤدي map.setTilt(45) إلى عرض مائل.

• يُرجى الاتصال برقم setTilt() لضبط زاوية إمالة الخريطة. استخدِم getTilt() للحصول على قيمة الميل الحالية.
• يُرجى الاتصال برقم setHeading() لضبط عنوان الخريطة. استخدِم getHeading() للحصول على قيمة العنوان الحالية.

لتغيير مركز الخريطة مع الحفاظ على الميل والاتجاه، استخدِم map.setCenter() أو map.panBy().

يُرجى العِلم أنّ نطاق الزوايا التي يمكن استخدامها يختلف حسب مستوى التكبير/التصغير الحالي. وسيتم تثبيت القيم التي تتجاوز هذا النطاق على النطاق المسموح به حاليًا.

يمكنك أيضًا استخدام الطريقة moveCamera لتغيير العنوان والميل والتوسيط والتكبير/التصغير آليًا. مزيد من المعلومات

التأثير في الطرق الأخرى

عند تطبيق إمالة أو دوران على الخريطة، يتأثّر سلوك طرق واجهة برمجة التطبيقات JavaScript API الأخرى في "خرائط Google":

• تعرض map.getBounds() دائمًا أصغر مربّع حدود يتضمّن المنطقة المرئية. وعند تطبيق الميل، قد تمثّل الحدود المعروضة منطقة أكبر من المنطقة المرئية في إطار عرض الخريطة.
• ستعيد map.fitBounds() ضبط الميل والاتجاه إلى القيمة صفر قبل ضبطحدود.
• ستؤدي map.panToBounds() إلى إعادة ضبط الميل والاتجاه إلى القيمة صفر قبل تمرير الحدود.
• يقبل map.setTilt() أي قيمة، ولكنه يفرض قيودًا على الحد الأقصى للإمالة استنادًا إلى مستوى التكبير/التصغير الحالي للخريطة.
• تقبل دالة map.setHeading() أي قيمة، وسيتم تعديلها لتلائم النطاق [0، 360].

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

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

موضع الكاميرا

تم تصميم عرض الخريطة على أنّه كاميرا تنظر إلى أسفل على سطح مستوٍ. يتم تحديد موضع الكاميرا (وبالتالي عرض الخريطة) من خلال الخصائص التالية: الهدف (الموقع الجغرافي لخط العرض/خط الطول)، اتجاه الانحراف، الإمالة، والتكبير/التصغير.

الاستهداف (الموقع الجغرافي)

استهداف الكاميرا هو الموقع الجغرافي لمركز الخريطة، ويتم تحديده على أنّه إحداثيات خط العرض وخط الطول.

الاتجاه

يحدِّد اتجاه الكاميرا اتجاه البوصلة، ويتم قياسه بالدرجات من الشمال الحقيقي، ويتوافق مع الحافة العلوية من الخريطة. إذا رسمت خطًا عموديًا من مركز الخريطة إلى الحافة العلوية للخريطة، سيتطابق الاتجاه مع اتجاه الكاميرا (يتم قياسه بالدرجات) مقارنةً بالاتجاه الحقيقي للشمال.

يعني الاتجاه 0 أنّ أعلى الخريطة يشير إلى الشمال الحقيقي. تشير قيمة الاتجاه 90 إلى أنّ أعلى الخريطة يشير إلى الشرق (90 درجة على البوصلة). تعني القيمة 180 أنّ أعلى الخريطة يشير إلى الجنوب.

تتيح لك واجهة برمجة التطبيقات Maps API تغيير اتّجاه الخريطة. على سبيل المثال، يدير سائق السيارة غالبًا خريطة الطرق لمواءمتها مع اتجاه التنقّل، في حين يوجّه عادةً المتنزّهون الذين يستخدمون خريطة ومقلوبة الخريطة لكي يشير الخط العمودي إلى الشمال.

الإمالة (زاوية العرض)

يحدِّد الإمالة موضع الكاميرا على قوس فوق مركز الخريطة مباشرةً، ويتم قياسه بالدرجات من النقطة السفلية (الاتجاه الذي يشير مباشرةً إلى أسفل الكاميرا). تشير القيمة 0 إلى كاميرا موجَّهة بشكل مباشر للأسفل. تتوافق القيم الأكبر من 0 مع كاميرا تم توجيهها نحو الأفق بدرجة محددة. عند تغيير زاوية العرض، تظهر الخريطة بتأثير المنظور، مع ظهور العناصر البعيدة بحجم أصغر والعناصر القريبة بحجم أكبر. توضّح الرسوم المتحرّكة التالية ذلك.

في الصور أدناه، تكون زاوية العرض 0 درجة. تعرض الصورة الأولى تخطيطًا توضيحيًا لذلك، حيث يشير الموضع 1 إلى موضع الكاميرا، والموضع 2 هو موضع الخريطة الحالي. تظهر الخريطة الناتجة تحتها.

في الصور أدناه، تكون زاوية العرض 45 درجة. لاحظ أنّ الكاميرا تتحرّك إلى منتصف قوس بين الوضع العلوي المباشر (0 درجة) والأرض (90 درجة)، لتصل إلى الوضع 3. لا تزال الكاميرا مصوّبة نحو نقطة مركز الخريطة، ولكن أصبحت المنطقة الممثّلة بالخط في الموضع 4 مرئية الآن.

لا تزال الخريطة في لقطة الشاشة هذه مركّزة على النقطة نفسها في الخريطة الأصلية، ولكن ظهرت المزيد من العناصر في أعلى الخريطة. عند زيادة الزاوية إلى أكثر من 45 درجة، تظهر العناصر بين الكاميرا وموضع الخريطة أكبر بشكلٍ نسبي، بينما تظهر العناصر التي تتجاوز موضع الخريطة أصغر بشكلٍ نسبي، ما يؤدي إلى تأثير ثلاثي الأبعاد.

Zoom

يحدِّد مستوى التكبير أو التصغير في الكاميرا مقياس الخريطة. عند استخدام مستويات التكبير الأكبر، يمكن رؤية المزيد من التفاصيل على الشاشة، بينما عند استخدام مستويات التكبير الأصغر، يمكن رؤية المزيد من العالم على الشاشة.

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

• 1: العالم
• 5: كتلة أرضية/قارة
• 10: المدينة
• 15: الشوارع
• 20: المباني

التكبير/التصغير الكسري

تتيح الخرائط المستندة إلى تقنية خطوط الالتفاف التكبير/التصغير الكسري، ما يتيح لك التكبير/التصغير باستخدام قيم شمسية بدلاً من الأعداد الصحيحة. على الرغم من أنّ كلّ من الخرائط النقطية والمتجهة تتيح التكبير/التصغير الكسري، يكون التكبير/التصغير الكسري مفعّلاً تلقائيًا في الخرائط المتّجهة، وغير مفعّل تلقائيًا في الخرائط النقطية. استخدِم خيار الخريطة 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');
  }
});