Định vị vị trí: 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 chỉ cho 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, sử dụng tính năng Vị trí địa lý HTML5 của trình duyệt của bạn cùng với API Maps JavaScript. Chiến lược phát hành đĩa đơn 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 định vị vị trí, họ sẽ nhận được lời nhắc từ trình duyệt để đồ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, nguyên nhân 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ỉ dùng được trong các bối cảnh an toàn (HTTPS), trên một số hoặc tất cả các trình duyệt được 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 dưới đây 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ụ

Dùng thử mẫu

Định vị vị trí là gì?

Vị trí địa lý là thông tin nhận dạng vị trí địa lý của thiết bị điện toán thông qua 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ị vị trí đều sử dụng mạng định tuyến hoặc chip GPS bên trong để xác định vị trí này. Vị trí địa lý là API dành riêng cho thiết bị. Điều này có nghĩa là các trình duyệt hoặc thiết bị phải hỗ trợ định vị vị trí để sử dụng thông qua các ứng dụng web.

Tiêu chuẩn vị trí địa lý W3C

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

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