رصد الموقع الجغرافي: عرض موضع المستخدم أو الجهاز على "خرائط Google"

نظرة عامة

يشرح لك هذا الدليل التوجيهي طريقة عرض الموقع الجغرافي لأحد الأجهزة على خريطة Google، وذلك باستخدام ميزة "رصد الموقع الجغرافي باستخدام HTML5" في متصفّحك إلى جانب واجهة برمجة التطبيقات Maps JavaScript API. لن يتم عرض الموقع الجغرافي إلا إذا سمح المستخدم بمشاركة الموقع الجغرافي.

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

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

يوضح النموذج أدناه الرمز الكامل الذي تحتاجه لإنشاء هذه الخريطة.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

function handleLocationError(
  browserHasGeolocation: boolean,
  infoWindow: google.maps.InfoWindow,
  pos: google.maps.LatLng
) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

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

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        },
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation.",
  );
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

ما المقصود برصد الموقع الجغرافي؟

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

معيار تحديد الموقع الجغرافي لـ W3C

على التطبيقات التي تريد رصد الموقع الجغرافي أن تتوافق مع معيار الموقع الجغرافي من W3C. يُرجى ملاحظة أنّ الرمز النموذجي المذكور أعلاه يحدِّد الموقع الجغرافي للجهاز من خلال واجهة برمجة التطبيقات W3C navigator.geolocation.

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