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

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