Vị trí địa lý: Hiển thị vị trí của người dùng hoặc thiết bị trên Maps

Tổng quan

Hướng dẫn này sẽ hướng dẫn bạn cách hiển thị vị trí địa lý của một thiết bị trên bản đồ của Google, bằng cách sử dụng tính năng Vị trí địa lý HTML5 của trình duyệt cùng với API JavaScript của Maps. Vị trí địa lý sẽ chỉ hiển thị nếu người dùng đã cho phép chia sẻ vị trí.

Khi người dùng kích hoạt yêu cầu vị trí địa lý, họ sẽ nhận được lời nhắc của trình duyệt về việc đồng ý truy cập vào dữ liệu vị trí của thiết bị. Nếu yêu cầu không thành công, thì có thể là do quyền truy cập thông tin vị trí bị từ chối hoặc do thiết bị không thể xác định vị trí của thiết bị. Tính năng này chỉ hoạt động trong các ngữ cảnh bảo mật (HTTPS), trong một số hoặc tất cả trình duyệt hỗ trợ.

Dưới đây là bản đồ có thể xác định vị trí hiện tại của thiết bị của người dùng.

Mẫu bên dưới cho thấy toàn bộ mã bạn cần để tạo bản đồ này.

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
Xem ví dụ

Thử mẫu

Định vị địa lý là gì?

Vị trí địa lý là việc xác định vị trí địa lý của một thiết bị điện toán bằng nhiều cơ chế thu thập dữ liệu. Thông thường, hầu hết các dịch vụ định vị địa lý đều sử dụng địa chỉ định tuyến mạng hoặc chip GPS nội bộ để xác định vị trí này. Vị trí địa lý là một API dành riêng cho thiết bị. Điều này có nghĩa là trình duyệt hoặc thiết bị phải hỗ trợ tính năng vị trí địa lý để sử dụng tính năng này thông qua các ứng dụng web.

Tiêu chuẩn Vị trí địa lý của W3C

Các ứng dụng muốn thực hiện tính năng xác định vị trí địa lý phải hỗ trợ tiêu chuẩn Xác định vị trí địa lý của W3C. Lưu ý rằng mã mẫu ở trên xác định vị trí của thiết bị thông qua API navigator.geolocation của W3C.

Đôi khi, các trang web sử dụng địa chỉ IP để phát hiện vị trí của một thiết bị. Tuy nhiên, thông tin này có thể chỉ cung cấp một số liệu ước tính sơ bộ về vị trí đó. API theo tiêu chuẩn W3C được hỗ trợ đầy đủ và chính xác nhất, vì vậy, bạn nên ưu tiên các API này hơn các phương thức xác định vị trí địa lý khác.