ตำแหน่งทางภูมิศาสตร์: การแสดงตำแหน่งผู้ใช้หรืออุปกรณ์บนแผนที่

ภาพรวม

บทแนะนำนี้จะแสดงวิธีแสดงตำแหน่งทางภูมิศาสตร์ของอุปกรณ์บนแผนที่ Google โดยใช้ คุณลักษณะตำแหน่งทางภูมิศาสตร์แบบ HTML5 ในเบราว์เซอร์ของคุณพร้อมด้วย 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;

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 ภายในเพื่อระบุตำแหน่งนี้ ตำแหน่งทางภูมิศาสตร์คือ API เฉพาะอุปกรณ์ ซึ่งหมายความว่าเบราว์เซอร์หรืออุปกรณ์ต้องรองรับตำแหน่งทางภูมิศาสตร์จึงจะใช้ ผ่านเว็บแอปพลิเคชัน

มาตรฐานตำแหน่งทางภูมิศาสตร์ของ W3C

แอปพลิเคชันที่ต้องการดำเนินการระบุตำแหน่งทางภูมิศาสตร์ต้องรองรับ มาตรฐานตำแหน่งทางภูมิศาสตร์ W3C โปรดสังเกตว่า โค้ดตัวอย่างด้านบนระบุตำแหน่งของอุปกรณ์ผ่าน W3C navigator.geolocation API

บางครั้งเว็บไซต์ใช้ที่อยู่ IP เพื่อตรวจหาตำแหน่งของอุปกรณ์ แต่ก็อาจให้เพียง ตำแหน่งนั้นคร่าวๆ API มาตรฐาน W3C เป็น API ที่รองรับอย่างสมบูรณ์และแม่นยำที่สุด ดังนั้น API เหล่านี้จึงควร มีความสำคัญมากกว่าวิธีการระบุตำแหน่งทางภูมิศาสตร์อื่นๆ