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

نظرة عامة

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

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

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

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

TypeScript

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

JavaScript

// 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. يُرجى العلم أنّ نموذج الرمز البرمجي أعلاه يحدّد الموقع الجغرافي للجهاز من خلال واجهة برمجة تطبيقات navigator.geolocation W3C.

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