(mở trong tab mới)gmap cloud
Tư vấn giải phápLiên hệ
Bản đồCơ bản2 phút đọcCó mã mẫu

Hiển thị bản đồ Việt Nam bằng MapLibre GL JS

Bản đồ nền GMap là style MapLibre có sẵn font, sprite và lớp địa điểm, nên bạn không phải tự dựng style. Bài này đi từ bản đồ trống đến bản đồ có đánh dấu và chế độ tối.

· GMap Cloud

Bản đồ đầu tiên

Nạp MapLibre GL JS (nên ghim phiên bản), tạo một khung có chiều cao và trỏ style tới GMap.

HTML
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<div id="map" style="height: 420px"></div>
<script>
  const KEY = 'public-gmap-cloud-x-api-key-demo';
  const map = new maplibregl.Map({
    container: 'map',
    style: `https://cloud.gmap.vn/api/tiles/style/basemap?x-api-key=${KEY}`,
    center: [108.224093, 16.0682606],
    zoom: 15,
  });
  new maplibregl.Marker()
    .setLngLat([108.224093, 16.0682606])
    .setPopup(new maplibregl.Popup().setText('Chợ Hàn Đà Nẵng'))
    .addTo(map);
</script>

Sáng hay tối theo giao diện

GMap có hai style: basemap (sáng) và darkmap (tối), cùng dữ liệu. Đổi style khi hệ điều hành chuyển chế độ:

JavaScript
const dark = matchMedia('(prefers-color-scheme: dark)');
const style = () =>
  `https://cloud.gmap.vn/api/tiles/style/${dark.matches ? 'darkmap' : 'basemap'}?x-api-key=${KEY}`;

const map = new maplibregl.Map({ container: 'map', style: style(), center: [105.8539, 21.0283], zoom: 14 });
dark.addEventListener('change', () => map.setStyle(style()));

Lưu ý khi đưa vào vận hành

  • Ghim phiên bản MapLibre (ví dụ maplibre-gl@4.7.1) để bản đồ không đổi khi thư viện phát hành bản mới.
  • Khóa API nằm trong mã trình duyệt nên ai cũng xem được; trao đổi với GMap về khóa cho môi trường vận hành.
  • Giữ phần ghi nguồn (attribution) mà style hiển thị ở góc bản đồ.
  • Ảnh vệ tinh là lớp raster riêng; xem phạm vi và cách dùng trong tài liệu API.