Bắt đầu

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

Để sử dụng định kiểu theo hướng dữ liệu cho các ranh giới, bạn phải tạo ID bản đồ sử dụng Bản đồ vectơ JavaScript. Tiếp theo, bạn phải tạo kiểu bản đồ mới, chọn kiểu các lớp đối tượng có 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ã 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. Chọn Độ nghiêng và/hoặc Xoay để bật tính năng nghiêng và xoay trên bản đồ. Nếu việc sử dụng chế độ nghiêng hoặc tiêu đề sẽ ảnh hưởng xấu đến ứng dụng của bạn, hãy để chế độ Nghiêng và Đã bỏ chọn xoay để người dùng sẽ không thể điều chỉnh độ nghiêng và chế độ xoay.

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.

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

Trong Bảng điều khiển API của Google, bạn có thể chọn lớp tính năng để hiển thị. Chiến dịch 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ý các lớp đối tượng

  1. Trong Bảng điều khiển API của Google, chuyển đến trang Kiểu bản đồ.
  2. Chọn một dự án nếu được nhắc.
  3. Chọn kiểu bản đồ.
  4. Nhấp vào menu thả xuống Lớp đối tượng để thêm hoặc xóa lớp.
  5. Nhấp vào Lưu để lưu các thay đổi và làm cho chúng khả dụng cho bản đồ của bạn.

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

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

Bạn cần cung cấp mã bản đồ mà bạn vừa tạo. Có thể tìm thấy địa điểm đó trên Maps của bạn Quản lý.

  1. Tải API JavaScript cho Maps bằng cách thêm quy trình tự khởi động cùng dòng vào mã xử lý ứng dụng của bạn, như thể hiện 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>

  1. Cung cấp mã nhận dạng bản đồ khi bạn tạo thực thể cho bản đồ bằng cách sử dụng thuộc tính mapId. Đây phải là mã bản đồ mà bạn đã định cấu hình bằng cách sử dụng kiểu bản đồ có tính năng lớp được bật.

    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 Maps JavaScript API.

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 đồ của 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 chức năng của bản đồ

Định kiểu theo hướng dữ liệu cho các ranh giới yêu cầu các khả năng được bật trong Google API Console và được liên kết với một ID bản đồ. Vì mã nhận dạng bản đồ là tạm thời và có thể thay đổi, 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 theo hướng dữ liệu) có có sẵn trước khi gọi đến số đó. 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 một trình nghe để đăng ký tính năng của bản đồ các thay đổi:

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

Các bước tiếp theo