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

بررسی اجمالی

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

در زیر نقشه ای است که می تواند موقعیت فعلی شما را شناسایی کند.

نمونه زیر کل کد مورد نیاز برای ایجاد این نقشه را نشان می دهد.

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

جاوا اسکریپت

// 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
مشاهده نمونه

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

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

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

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

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

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