إشعار الأمان: نما إلى علمنا بمشكلة أمنية قد تؤثر في المواقع الإلكترونية التي تستخدم مكتبات معيّنة تابعة لجهات خارجية (بما في ذلك polyfill.io). وقد تؤدي هذه المشكلة في بعض الأحيان إلى إعادة توجيه الزائرين بعيدًا عن الموقع الإلكتروني المقصود بدون معرفة مالك الموقع أو إذنه. وفي السابق، كان يتضمّن العديد من نماذج JavaScript تعريف النص البرمجي polyfill.io. تمت إزالة هذا المحتوى من نماذجنا. إذا كنت قد استخدمت نماذج JavaScript التي تحتوي على هذا التعريف، ننصحك بإزالة التعريف.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

أنواع الخرائط

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

يناقش هذا المستند أنواع الخرائط التي يمكنك عرضها باستخدام واجهة برمجة تطبيقات JavaScript للخرائط. تستخدم واجهة برمجة التطبيقات MapType يحتوي على معلومات حول هذه الخرائط. MapType هي واجهة تحدد عرض واستخدام مربعات الخرائط ترجمة أنظمة الإحداثيات من إحداثيات الشاشة إلى العالم (على الخريطة). يجب أن يحتوي كل MapType على طرق قليلة للتعامل مع استرجاع وإطلاق المربعات، والخصائص التي تحدد سلوكه المرئي.

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

أنواع الخرائط الأساسية

هناك أربعة أنواع من الخرائط المتاحة ضمن Maps JavaScript API. بالإضافة إلى الرسم البياني المألوف ومربعات خريطة الطريق تتوافق واجهة برمجة تطبيقات JavaScript للخرائط أيضًا مع أنواع الخرائط الأخرى.

تتوفر أنواع الخرائط التالية في واجهة برمجة تطبيقات JavaScript للخرائط:

يعرض roadmap العرض التلقائي لخريطة الطريق. هذا النمط هو نوع الخريطة الافتراضي.
يعرض جهاز "satellite" القمر الصناعي في Google Earth الصور.
يعرض hybrid مزيجًا من الصور العادية والأقمار الصناعية. طرق العرض.
يعرض تطبيق "terrain" خريطة فعلية استنادًا إلى التضاريس. المعلومات.

يمكنك تعديل نوع الخريطة التي تستخدمها Map من خلال ضبط السمة mapTypeId، إما داخل الدالة الإنشائية من خلال الإعداد كائن Map options، أو من خلال استدعاء دالة الرسم setMapTypeId(). السمة mapTypeID القيمة التلقائية هي roadmap.

ضبط mapTypeId عند الإنشاء:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

تعديل mapTypeId ديناميكيًا:

map.setMapTypeId('terrain');

لاحظ أنك لم تحدد فعليًا نوع خريطة الخريطة مباشرةً، ولكن بدلاً من ذلك، عيّن mapTypeId للإشارة إلى MapType باستخدام معرّف. تستخدم واجهة برمجة تطبيقات JavaScript للخرائط قاعدة بيانات المسجّلين لنوع الخريطة، كما هو موضح أدناه، لإدارة هذه المراجع.

صور بزاوية 45 درجة

تدعم واجهة برمجة تطبيقات JavaScript للخرائط صورًا خاصة بزاوية 45 درجة مواقع جغرافية معينة. توفر هذه الصور عالية الدقة وجهات النظر حول كل اتجاه من الاتجاه الأساسي (الشمال والجنوب والشرق والغرب). تتوفّر هذه الصور على مستويات التكبير/التصغير لأنواع الخرائط المتوافقة.

توضح الصورة التالية مدينة نيويورك من منظور 45 درجة:

يتيح نوعا الخرائط satellite وhybrid استخدام نطاق 45° الصور بمستويات تكبير/تصغير عالية (12 أو أعلى) حيثما أمكن. إذا كان المستخدم تقوم بتكبير موقع توجد فيه هذه الصور، فإن أنواع الخرائط هذه تغيير وجهات نظرهم تلقائيًا بالطريقة التالية:

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

بين مستويَي التكبير/التصغير 12 و18، يتم عرض الخريطة الأساسية من أعلى لأسفل (0°) حسب القيمة التلقائية ما لم يتم ضبط tilt على 45.
عند مستويات التكبير/التصغير 18 أو أكثر، يتم عرض الخريطة الأساسية بزاوية 45 درجة ما لم تم ضبط tilt على 0.

يصبح عنصر التحكّم في التدوير مرئيًا. يوفِّر عنصر التحكّم في التدوير خيارات التي تمكّن المستخدم من تبديل الإمالة وتدوير العرض بزاوية 90 درجة يزيد في أي من الاتجاهين. لإخفاء عنصر التحكّم في التدوير، اضبط إعدادات rotateControl إلى false

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

تفعيل ميزة الصور بزاوية 45 درجة وإيقافها

يمكنك إيقاف الصور بزاوية 45 درجة من خلال الاتصال بـ setTilt(0) على كائن Map. لتفعيل صور بزاوية 45 درجة لأنواع الخرائط المتوافقة، الاتصال بخدمة setTilt(45) جهاز getTilt() الخاص بـ "Map" سيعكس دائمًا tilt الحالي المعروض على الخريطة؛ إذا ضبطت علامة tilt على خريطة ثم أزلتها لاحقًا tilt (عن طريق تكبير الخريطة، على سبيل المثال)، ستعرض الطريقة getTilt() القيمة 0.

ملاحظة مهمة: لا تتوفّر الصور بزاوية 45 درجة إلا على الخرائط النقطية لا يمكن استخدام هذه الصور مع خرائط المتجهات.

يُظهر المثال التالي مدينة نيويورك بزاوية 45 درجة:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40.76, lng: -73.983 },
      zoom: 15,
      mapTypeId: "satellite",
    }
  );

  map.setTilt(45);
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
  });

  map.setTilt(45);
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

الاطّلاع على مثال

تدوير الصور بزاوية 45 درجة

تتكون الصور بزاوية 45 درجة في الواقع من مجموعة من الصور لكل اتجاه أساسي (الشمال والجنوب والشرق والغرب). عندما تظهر الخريطة يعرض صورًا بزاوية 45 درجة، فيمكنك توجيه الصور نحو أحد اتجاهاتها الأساسية من خلال استدعاء setHeading() على الجسم Map وتمريره قيمة عددية يتم التعبير عنها بالدرجات من الشمال.

يوضح المثال التالي خريطة جوية ويتم تدويرها تلقائيًا الخريطة كل 3 ثوانٍ عند النقر على الزر:

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });

  // add listener to button
  document.getElementById("rotate")!.addEventListener("click", autoRotate);
}

function rotate90(): void {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate(): void {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

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

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });
  // add listener to button
  document.getElementById("rotate").addEventListener("click", autoRotate);
}

function rotate90() {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

الاطّلاع على مثال

تعديل سجل نوع الخريطة

mapTypeId للخريطة هو معرّف سلسلة تُستخدم لربط MapType قيمة فريدة. يحتفظ كل كائن Map بسمة MapTypeRegistry الذي يحتوي على مجموعة MapTypes لهذه الخريطة. قاعدة بيانات المسجّلين هذه لتحديد أنواع الخرائط المتوفرة في عنصر التحكم MapType للخريطة، على سبيل المثال.

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

يعمل الكود التالي على ضبط الخريطة لتظهر فقط نوعان من الخرائط في mapTypeControlOptions على الخريطة وتعديل السجل لإضافة الارتباط هذا المعرّف بالتنفيذ الفعلي الواجهة MapType.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

خرائط ذات نمط

يتيح لك StyledMapType تخصيص طريقة عرض خرائط Google الأساسية القياسية، وتغيير العرض المرئي لمثل هذه العناصر كطرق وحدائق ومناطق مبنية لتعكس نمطًا مختلفًا عن ذلك المستخدمة في نوع الخريطة الافتراضي.

لمزيد من المعلومات عن StyledMapType، يمكنك الاطّلاع على دليل خرائط ذات نمط معيّن.

أنواع الخرائط المخصصة

تدعم واجهة برمجة تطبيقات JavaScript للخرائط عرض وإدارة أنواع الخرائط المخصصة، الأمر الذي يتيح لك تنفيذ صور الخريطة الخاصة بك أو تراكبات الصور.

توجد العديد من عمليات التنفيذ الممكنة لنوع الخريطة في واجهة برمجة تطبيقات JavaScript للخرائط:

مجموعات مربّعات قياسية تتألف من صور تشكل مجتمعة خرائط كاملة لرسم الخرائط. هذه المربعات تُعرف أيضًا باسم أنواع الخرائط الأساسية. تتضمن أنواع الخرائط هذه التصرف والتصرف مثل أنواع الخرائط الافتراضية الحالية: roadmap، satellite، hybrid وterrain يمكنك إضافة نوع خريطة مخصّص إلى مصفوفة mapTypes على الخريطة من أجل السماح لواجهة المستخدم داخل Maps JavaScript API التعامل مع نوع الخريطة المخصصة على أنها نوع خريطة قياسي (من خلال تضمينه في نوع MapType) التحكم، على سبيل المثال).
تراكبات صور يتم عرضها أعلى أنواع الخرائط الأساسية الحالية. بشكل عام، تُستخدم أنواع الخرائط هذه لزيادة نوع خريطة حالية لعرض معلومات المعلومات وغالبًا ما تقتصر على مواقع محددة و/أو مستويات التكبير/التصغير. يُرجى العِلم أنّ هذه المربّعات قد تكون شفافة مما يسمح لك بإضافة ميزات إلى الخرائط الحالية.
أنواع الخرائط بخلاف الصور، والتي تسمح لك بمعالجة عرض معلومات الخريطة في أقصى مستوى لها.

يعتمد كل خيار من هذه الخيارات على إنشاء فئة لتنفيذ MapType من واجهة pyplot. إضافةً إلى ذلك، فإنّ توفر فئة ImageMapType بعض الميزات السلوك لتبسيط إنشاء أنواع خرائط الصور.

واجهة `MapType`

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

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

ملاحظة: يمكنك إنشاء فئتك الخاصة لتنفيذ هذه الواجهة. بدلاً من ذلك، إذا كان لديك الصور المتوافقة، يمكنك استخدام طريقة فئة ImageMapType قيد التنفيذ هذه الواجهة.

الصفوف التي تنفّذ واجهة MapType تحديد السمات التالية وتعبئتها:

tileSize (مطلوب) يحدد حجم المربع (من النوع google.maps.Size). يجب أن تكون الأحجام مستطيلة. على الرغم من أنها لا ينبغي أن تكون مربعة.
maxZoom (مطلوب) يحدد الحد الأقصى للتكبير/التصغير المستوى الذي يتم عنده عرض مربعات نوع الخريطة هذا.
minZoom (اختياري) يحدد الحد الأدنى للتكبير/التصغير المستوى الذي يتم عنده عرض مربع نوع الخريطة هذا. بشكل افتراضي، هذه القيمة هي 0، ما يشير إلى عدم وجود حد أدنى مستوى التكبير أو التصغير حاليًا.
يحدّد name (اختياري) اسم هذه الخريطة الكتابة. هذه الخاصية ضرورية فقط إذا كنت تريد نوع الخريطة هذا قابلة للتحديد ضمن عنصر تحكم MapType. (راجع جارٍ إضافة MapType عناصر تحكّم أدناه).
alt (اختياري) يحدد النص البديل لهذا نوع الخريطة، وتُعرض كنص تمرير. هذه السمة ضرورية فقط إذا أردت أن يكون نوع الخريطة هذا قابلاً للتحديد ضمن عنصر تحكم MapType. (راجِع إضافة عناصر تحكّم MapType below.)

إضافةً إلى ذلك، لا تتوفر الصفوف التي تنفّذ واجهة MapType إلى تنفيذ الطرق التالية:

يتم استدعاء الدالة getTile() (مطلوبة) عند طلب واجهة برمجة التطبيقات أن الخريطة تحتاج إلى عرض مربعات جديدة إطار العرض. يجب أن تتضمّن طريقة getTile() ما يلي: التوقيع:

getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

تحدِّد واجهة برمجة التطبيقات ما إذا كان يجب استدعاء getTile() استنادًا إلى tileSize الخاصة بـ MapType، minZoom وmaxZoom وإطار العرض ومستوى التكبير/التصغير الحالي للخريطة. المعالج لهذه الطريقة يجب أن يكون عنصر HTML محددًا به إحداثي تم تمريره، مستوى التكبير أو التصغير وعنصر DOM الذي سيتم إلحاق صورة المربع عليه.
يتم استدعاء الدالة releaseTile() (اختيارية) عند استخدام واجهة برمجة التطبيقات تحديد أن الخريطة بحاجة إلى إزالة مربع عند سقوطه عن العرض. يجب أن تحتوي هذه الطريقة على التوقيع التالي:

releaseTile(tile:Node)

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

تعمل الطريقة getTile() كوحدة تحكم رئيسية تحديد المربّعات التي سيتم تحميلها ضمن إطار عرض معين.

أنواع الخرائط الأساسية

قد تكون أنواع الخرائط التي تُنشئها بهذه الطريقة إما وحدها أو دمجها مع أنواع خرائط أخرى كتراكبات. نظام تدفئة مستقل أنواع الخرائط باسم أنواع الخرائط الأساسية. قد ترغب في الحصول على واجهة برمجة التطبيقات معاملة MapType المخصّصة هذه كما هي مع أي عناوين أخرى حالية نوع الخريطة الأساسية (ROADMAP، TERRAIN، إلخ). للقيام بذلك، لذا، عليك إضافة MapType المخصّص إلى Map الموقع "mapTypes". هذا الموقع من النوع MapTypeRegistry

ينشئ الرمز التالي قاعدة MapType لعرضها. إحداثيات متجانب الخريطة ويرسم مخططًا للمربعات:

TypeScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType {
  tileSize: google.maps.Size;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }

  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }

  releaseTile(tile: HTMLElement): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
      streetViewControl: false,
      mapTypeId: "coordinate",
      mapTypeControlOptions: {
        mapTypeIds: ["coordinate", "roadmap"],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      },
    }
  );

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl =
      (map.getMapTypeId() as string) !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

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

JavaScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
    streetViewControl: false,
    mapTypeId: "coordinate",
    mapTypeControlOptions: {
      mapTypeIds: ["coordinate", "roadmap"],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    },
  });

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl = map.getMapTypeId() !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });
  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256)),
  );
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

أنواع الخرائط التي تظهر على سطح الفيديو

تم تصميم بعض أنواع الخرائط للعمل أعلى الخريطة الموجودة الأنواع. وقد تحتوي أنواع الخرائط هذه على طبقات شفافة تشير إلى أو نقاط الاهتمام، أو إظهار بيانات إضافية للمستخدم.

في هذه الحالات، لن ترغب في التعامل مع نوع الخريطة ككيان منفصل ولكن كتراكب. يمكنك إجراء ذلك من خلال إضافة نوع الخريطة إلى MapType حالية مباشرةً باستخدام السمة overlayMapTypes لـ Map. يحتوي هذا الموقع على MVCArray من MapType. جميع أنواع الخرائط (القاعدة والتراكب) ضمن mapPane الطبقة الخارجية. سيتم عرض أنواع الخرائط المركّبة فوق الخريطة الأساسية بالترتيب الذي تظهر به في مصفوفة Map.overlayMapTypes (تتراكب مع فهرس أعلى يتم عرض القيم أمام التراكبات ذات قيم فهرس أقل).

المثال التالي مماثل للمثال السابق باستثناء إنشاء تراكب مربّعات MapType أعلى نوع الخريطة ROADMAP:

TypeScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType implements google.maps.MapType {
  tileSize: google.maps.Size;
  alt: string|null = null;
  maxZoom: number = 17;
  minZoom: number = 0;
  name: string|null = null;
  projection: google.maps.Projection|null = null;
  radius: number = 6378137;

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }
  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile: Element): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
  map.overlayMapTypes.insertAt(
    0,
    coordMapType
  );
}

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

JavaScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  alt = null;
  maxZoom = 17;
  minZoom = 0;
  name = null;
  projection = null;
  radius = 6378137;
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
  });
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256));

  map.overlayMapTypes.insertAt(0, coordMapType);
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

أنواع خرائط الصور

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

هذا الصف، فئة ImageMapType، تم إنشاؤها باستخدام ImageMapTypeOptions مواصفات الكائنات التي تحدد ما يلي المواقع:

tileSize (مطلوب) يحدد حجم المربع (من النوع google.maps.Size). يجب أن تكون الأحجام مستطيلة. على الرغم من أنها لا ينبغي أن تكون مربعة.
getTileUrl (مطلوب) يحدد الدالة، يتم تقديمها عادةً على أنها دالة مضمّنة حرفية للتعامل مع تحديد مربع الصورة المناسب بناءً على المقدمة الإحداثيات العالمية ومستوى التكبير أو التصغير.

ينفذ الرمز التالي ImageMapType أساسي باستخدام مربعات القمر في Google. يستخدم هذا المثال تسوية للتأكد من تكرار المربعات على طول المحور x، ولكن ليس على طول المحور y لخريطتك.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 0, lng: 0 },
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"],
      },
    }
  );

  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom): string {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }

  return { x: x, y: y };
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"],
    },
  });
  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

التوقعات

الأرض هي كرة ثلاثية الأبعاد (تقريبًا)، بينما الخريطة عبارة عن سطح مسطح ثنائي الأبعاد. الخريطة التي تراها داخل تُعد واجهة برمجة تطبيقات JavaScript للخرائط، مثل أي خريطة مسطحة للأرض، إسقاط هذه الكرة على سطح مستوٍ. في أبسط صورها المصطلحات، يمكن تعريف التوقع بأنه رسم قيم خطوط الطول/العرض إلى إحداثيات على خريطة الإسقاط.

يجب أن تنفِّذ الإسقاطات في واجهة برمجة تطبيقات JavaScript للخرائط واجهة Projection. Projection يجب ألا يوفر التنفيذ تعيينًا من إحداثي واحد فقط إلى نظام آخر، بل الربط ثنائي الاتجاه. أي، يجب عليك تحديد كيفية الترجمة من إحداثيات Earth (LatLng عنصرًا) إلى الفئة Projection العالم نظام التنسيق، والعكس صحيح. تستخدم خرائط Google إسقاط ماركتور لإنشاء خرائطه من البيانات الجغرافية وتحويل الأحداث على الخريطة إلى الإحداثيات الجغرافية ويمكنك الحصول على هذا الإسقاط من خلال يَتِمُّ الْآنَ الِاتِّصَالْ بِـ getProjection() عَلَى Map. (أو أي من أنواع MapType الأساسية العادية). بالنسبة لمعظم الاستخدامات، يكفي استخدام مقياس Projection هذا، ولكن يمكنك أيضًا تحديد واستخدام التوقعات المخصصة الخاصة بك.

تنفيذ توقع

عند تنفيذ عرض مخصص، ستحتاج إلى تحديد بعض الأشياء:

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

تنسيق عمليات التحويل في التوقعات

يوفر كل إسقاط طريقتين للترجمة بين هذين النوعين وإحداثيات، مما يسمح لك بتحويل البيانات الجغرافية الإحداثيات العالمية:

تُحوِّل الطريقة Projection.fromLatLngToPoint() LatLng في أحد الإحداثيات العالمية. يتم استخدام هذه الطريقة لتحديد موضع التراكبات على الخريطة (ولتحديد موضع الخريطة نفسها).
تُحوِّل الطريقة Projection.fromPointToLatLng() إحداثي عالم إلى قيمة LatLng. هذا النمط تُستخدم لتحويل الأحداث مثل النقرات التي تحدث على الخريطة في إحداثيات جغرافية.

تفترض "خرائط Google" أنّ الإسقاطات مستقيمة الخطوط.

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

اختيار بلاط الخريطة في الإسقاطات

لا تكون التوقعات مفيدة فقط في تحديد مواقف المواقع أو التراكبات، ولكن لوضع مربعات الخريطة نفسها. تعرض "واجهة برمجة تطبيقات JavaScript للخرائط" الخرائط الأساسية باستخدام MapType التي يجب أن تشير إلى كلتا السمتَين projection في تحديد إسقاط الخريطة وgetTile() طريقة استرداد مربعات الخرائط استنادًا إلى مربّع إحداثيات. تستند إحداثيات المربع إلى كل من حجم الإطار الأساسي (الذي يجب أن يكون مستطيلًا) و"العالم" الحجم" لخريطتك، وهو حجم البكسل لعالم الخريطة في مستوى التكبير/التصغير 0. (بالنسبة للخرائط التي تتكون من مربع واحد عند التكبير/التصغير 0، يشتمل المربع الحجم والحجم العالمي متطابقين).

أنت تحدِّد حجم المربّع الأساسي ضِمن حجم مربّع "MapType". الموقع الإلكتروني tileSize. يمكنك تحديد حجم العالم بشكل ضمني ضِمن fromLatLngToPoint() لتوقعاتك وfromPointToLatLng() طريقة.

نظرًا لأن اختيار الصور يعتمد على هذه القيم التي تم تمريرها، فمن المفيد لتحديد الصور التي يمكن اختيارها آليًا في ضوء هذه القيم التي تم تمريرها، مثل map_zoom_tileX_tileY.png

يحدّد المثال التالي عنصر ImageMapType باستخدام توقع شركة Gall-Peters:

TypeScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap(): void {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 0,
      center: { lat: 0, lng: 0 },
      mapTypeControl: false,
    }
  );

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords") as HTMLElement;

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng!.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng!.lng());
  });

  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name") as string,
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;

      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";

      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

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

JavaScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });
  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;
      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });
  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)),
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap,
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

أنواع الخرائط

أنواع الخرائط الأساسية

صور بزاوية 45 درجة

تفعيل ميزة الصور بزاوية 45 درجة وإيقافها

TypeScript

JavaScript

تجربة "عيّنة"

تدوير الصور بزاوية 45 درجة

TypeScript

JavaScript

تجربة "عيّنة"

تعديل سجل نوع الخريطة

خرائط ذات نمط

أنواع الخرائط المخصصة

واجهة MapType

أنواع الخرائط الأساسية

TypeScript

JavaScript

تجربة "عيّنة"

أنواع الخرائط التي تظهر على سطح الفيديو

TypeScript

JavaScript

تجربة "عيّنة"

أنواع خرائط الصور

TypeScript

JavaScript

تجربة "عيّنة"

التوقعات

تنفيذ توقع

تنسيق عمليات التحويل في التوقعات

اختيار بلاط الخريطة في الإسقاطات

TypeScript

JavaScript

تجربة "عيّنة"

واجهة `MapType`