Bắt đầu

Chọn nền tảng: Android iOS JavaScript

Làm theo các bước sau để thiết lập kiểu theo hướng dữ liệu cho các tập dữ liệu.

Nhận khoá API và bật API

Trước khi sử dụng phương thức định kiểu dựa trên dữ liệu cho các tập dữ liệu, bạn cần: dự án có tài khoản thanh toán và cả API JavaScript của Maps và Maps Datasets API được bật. Để tìm hiểu thêm, hãy xem bài viết Thiết lập dự án trên Google Cloud.

Tải khoá API

Bật API JavaScript cho Maps

Bật API Tập dữ liệu Maps

Tạo mã bản đồ

Để tạo mã bản đồ mới, hãy làm theo các bước trong Tuỳ chỉnh trên đám mây. Đặt loại Bản đồ thành JavaScript và chọn tùy chọn Vector.

Cung cấp mã nhận dạng bản đồ bằng thuộc tính mapId khi bạn tạo thực thể cho bản đồ . Mã bản đồ phải tương ứng với kiểu bản đồ được liên kết với tập dữ liệu để hiển thị.

const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: position,
  mapId: 'YOUR_MAP_ID',
});

Tạo mã bản đồ vectơ

Tạo kiểu bản đồ mới

Để tạo kiểu bản đồ mới, hãy làm theo hướng dẫn trong mục Quản lý kiểu bản đồ để tạo kiểu và liên kết kiểu với mã nhận dạng bản đồ mà bạn vừa tạo.

Cập nhật mã khởi chạy bản đồ

Để sử dụng cách định kiểu theo hướng dữ liệu cho các tập dữ liệu, trước tiên hãy tải Maps JavaScript API, bằng cách thêm trình tải khởi động cùng dòng vào mã xử lý ứng dụng của bạn, như được hiển thị ở đây (sử dụng v=beta trong thẻ API script):

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Kiểm tra các chức năng của bản đồ (không bắt buộc)

Định kiểu theo hướng dữ liệu cho tập dữ liệu yêu cầu ID bản đồ. Nếu mã bản đồ bị thiếu, hoặc đã qua một mã bản đồ không hợp lệ, thì không thể tải tính năng dữ liệu. Là một bước khắc phục sự cố, bạn có thể thêm trình nghe mapcapabilities_changed vào đăng ký nhận các thay đổi về chức năng bản đồ. Điều này sẽ cho biết liệu các đã đáp ứng điều kiện:

  • Mã bản đồ hợp lệ đang được sử dụng.
  • ID bản đồ được liên kết với một bản đồ vectơ.

Việc sử dụng Chức năng của bản đồ là không bắt buộc và chỉ nên dùng cho mục đích thử nghiệm và cho mục đích khắc phục sự cố hoặc dự phòng trong thời gian chạy.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

Các bước tiếp theo