Places UI Kit: Một thư viện có thể sử dụng ngay, cung cấp không gian tuỳ chỉnh và kiểm soát cho nhà phát triển. Hãy dùng thử và chia sẻ ý kiến của bạn về trải nghiệm dùng Bộ giao diện người dùng.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Bắt đầu

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

Để sử dụng tính năng định kiểu dựa trên dữ liệu cho ranh giới, bạn phải tạo một mã bản đồ sử dụng bản đồ vectơ JavaScript. Tiếp theo, bạn phải tạo một kiểu bản đồ mới, chọn các lớp đối tượng ranh giới và liên kết kiểu đó với mã bản đồ của bạn.

Tạo mã bản đồ

Để tạo một mã bản đồ mới, hãy làm theo các bước trong phần Tuỳ chỉnh trên đám mây. Đặt Loại bản đồ thành JavaScript rồi chọn Vectơ. Đánh dấu vào Nghiêng và Xoay để bật tính năng nghiêng và xoay trên bản đồ. Nếu việc sử dụng độ nghiêng hoặc hướng ảnh hưởng xấu đến ứng dụng của bạn, hãy bỏ đánh dấu Độ nghiêng và Xoay để người dùng không thể điều chỉnh các chế độ này.

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 phần Quản lý kiểu bản đồ để tạo kiểu và liên kết kiểu đó với mã bản đồ mà bạn vừa tạo.

Chọn lớp đối tượng

Trong Google API Console, bạn có thể chọn lớp đối tượng để hiển thị. Thuộc tính này xác định loại ranh giới sẽ xuất hiện trên bản đồ (ví dụ: địa phương, tiểu bang, v.v.).

Cách quản lý lớp đối tượng

Trong Google API Console, hãy chuyển đến trang Kiểu bản đồ.
Chọn một dự án nếu được nhắc.
Chọn một kiểu bản đồ.
Nhấp vào trình đơn thả xuống Lớp đối tượng để thêm hoặc xoá lớp.
Nhấp vào Lưu để lưu các thay đổi và áp dụng cho bản đồ của bạn.

Ảnh chụp màn hình trình đơn thả xuống.

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

Bạn cần có mã bản đồ vừa tạo để thực hiện việc này. Bạn có thể tìm thấy trang này trên trang Quản lý bản đồ.

Tải API JavaScript của Maps bằng cách thêm trình nạp khởi động cùng dòng vào mã xử lý ứng dụng, như trong đoạn mã sau:

<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>

Cung cấp mã bản đồ khi bạn tạo thực thể cho bản đồ bằng thuộc tính mapId. Đây phải là mã bản đồ mà bạn đã định cấu hình bằng kiểu bản đồ có bật lớp đối tượng.
```
map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});
```

Tìm hiểu thêm về cách tải API JavaScript cho Maps.

Thêm lớp đối tượng vào bản đồ

Để tham chiếu đến một lớp đối tượng trên bản đồ, hãy gọi map.getFeatureLayer() khi bản đồ khởi chạy:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Kiểm tra các tính năng của bản đồ

Tính năng định kiểu dựa trên dữ liệu cho ranh giới yêu cầu các chức năng được bật trong Google API Console và được liên kết với một mã bản đồ. Vì mã bản đồ chỉ tồn tại tạm thời và có thể thay đổi, nên bạn có thể gọi map.getMapCapabilities() để xác minh xem một chức năng nhất định (ví dụ: định kiểu dựa trên dữ liệu) có hoạt động hay không trước khi gọi chức năng đó. Bước kiểm tra này là không bắt buộc.

Ví dụ sau đây cho thấy cách thêm trình nghe để đăng ký nhận thông tin về các thay đổi đối với chức năng của bản đồ:

// subscribe to 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.
  }
});