موقعیت جغرافیایی: نمایش موقعیت کاربر یا دستگاه در نقشه ها

نمای کلی

این آموزش به شما نشان می دهد که چگونه می توانید موقعیت جغرافیایی یک دستگاه را بر روی نقشه گوگل با استفاده از ویژگی HTML5 Geolocation مرورگر خود همراه با Maps JavaScript API نمایش دهید. موقعیت جغرافیایی تنها در صورتی نمایش داده می شود که کاربر اجازه اشتراک گذاری مکان را داده باشد.

هنگامی که کاربر درخواست موقعیت جغرافیایی را راه اندازی می کند، درخواستی از مرورگر برای رضایت برای دسترسی به داده های موقعیت مکانی دستگاه دریافت می کند. اگر درخواست با شکست مواجه شد، ممکن است به این دلیل باشد که مجوزهای مکان رد شده است، یا به این دلیل که دستگاه نمی تواند مکان خود را تعیین کند. این ویژگی فقط در زمینه های امن (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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

توجه: جاوا اسکریپت از قطعه TypeScript کامپایل شده است.

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

موقعیت جغرافیایی چیست؟

مکان جغرافیایی به شناسایی موقعیت جغرافیایی یک دستگاه محاسباتی با استفاده از مکانیسم های مختلف جمع آوری داده ها اشاره دارد. به طور معمول، اکثر سرویس های موقعیت جغرافیایی از آدرس های مسیریابی شبکه یا تراشه های GPS داخلی برای تعیین این مکان استفاده می کنند. مکان جغرافیایی یک API مخصوص دستگاه است. این بدان معناست که مرورگرها یا دستگاه‌ها باید از موقعیت جغرافیایی پشتیبانی کنند تا بتوانند از طریق برنامه‌های کاربردی وب استفاده کنند.

استاندارد موقعیت جغرافیایی W3C

برنامه هایی که می خواهند موقعیت جغرافیایی را انجام دهند باید از استاندارد W3C Geolocation پشتیبانی کنند. توجه داشته باشید که کد نمونه بالا مکان دستگاه را از طریق W3C navigator.geolocation API تعیین می کند.

گاهی اوقات وب‌سایت‌ها از آدرس‌های IP برای شناسایی مکان یک دستگاه استفاده می‌کنند، اما این ممکن است فقط یک تخمین تقریبی از آن مکان ارائه دهد. APIهای استاندارد W3C کاملاً پشتیبانی شده‌ترین و دقیق‌ترین هستند، بنابراین باید نسبت به سایر روش‌های مکان‌یابی جغرافیایی اولویت‌بندی شوند.