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

نظرة عامة

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

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

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

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;

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;
الاطّلاع على مثال

تجربة العينة

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

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

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

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

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