ميزات خريطة المتّجه

اختيار النظام الأساسي: Android iOS JavaScript

عرض نموذج

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

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

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

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

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

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

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

إمالة الجهاز وتدويره

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

TypeScript

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

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

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

ملاحظة: يتم تجميع JavaScript من مقتطف TypeScript.

CSS

/* 
 * 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

<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

تجربة عيّنة

JSFiddle.net Google Cloud Shell

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

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

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

ضبط الإمالة والعنوان آليًا

استخدِم الطريقتَين 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);

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

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

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

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

يمكن أن يتراوح خط العرض بين -85 و85 درجة. سيتم تقريب القيم التي تزيد عن أو تقل عن هذا النطاق إلى أقرب قيمة ضمن هذا النطاق. على سبيل المثال، سيؤدي تحديد خط عرض 100 إلى ضبط القيمة على 85. يتراوح خط الطول بين -180 و180 درجة، شاملاً. سيتم لف القيم التي تزيد عن هذا النطاق أو تقلّ عنه بحيث تقع ضمن النطاق (-180, 180). على سبيل المثال، سيتم لفّ الإطارات التي يبلغ ارتفاعها 480 و840 و1200 درجة إلى 120 درجة.

الاتجاه

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

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

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

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

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

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

يتم عرض الخريطة بزاوية العرض التلقائية للكاميرا.

زاوية العرض التلقائية للكاميرا

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

يتم عرض الخريطة بزاوية عرض 45 درجة.

زاوية عرض الكاميرا 45 درجة

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

Zoom

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

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

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

ملاحظة: قد لا تتيح بعض الأجهزة استخدام أدنى مستويات التصغير بسبب حجم الشاشة وكثافتها.

توضّح الصور التالية المظهر المرئي لمستويات التكبير/التصغير المختلفة:

خريطة في مستوى التكبير 5

خريطة في مستوى التكبير 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');
  }
});

تحذير: سيتم تنشيط الحدث zoom_changed بشكلٍ متكرّر أكثر عند تفعيل التكبير/التصغير المقسوم. سيؤثّر ذلك في أي مستمعين تم إعدادهم لتتبُّع zoom_changed. لتحقيق الأداء الأمثل، ننصحك بعدم إجراء تعديلات إلا إذا تغيّر مستوى التكبير/التصغير باستخدام قيمة عددية، أو تطبيق ميزة "تقييد السرعة".