Làm theo các bước sau để thiết lập tính năng định kiểu dựa trên dữ liệu cho bản xem trước tập dữ liệu.
Lấy khoá API và bật API
Trước khi sử dụng kiểu dựa trên dữ liệu để xem trước tập dữ liệu, bạn cần có: Dự án trên đám mây có tài khoản thanh toán, đồng thời bật cả API JavaScript của Maps và API Tập dữ liệu Maps. Để tìm hiểu thêm, hãy xem bài viết Thiết lập dự án trên Google Cloud.
Tạo mã bản đồ
Để tạo 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 và chọn tùy chọn Vectơ.
Cung cấp mã bản đồ bằng cách sử dụ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 đồ liên kết với tập dữ liệu cần 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 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 đồ bạn vừa tạo.
Cập nhật mã khởi tạo bản đồ của bạn
Để sử dụng định kiểu dựa trên dữ liệu cho bản xem trước tập dữ liệu, trước tiên hãy tải API JavaScript Maps, 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ư minh hoạ dưới đây (sử dụng v=beta trong thẻ script API của bạn):
<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: "beta",
// 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 mã bản đồ. Nếu thiếu mã bản đồ hoặc truyền mã bản đồ không hợp lệ, thì các tính năng dữ liệu sẽ không thể tải. Trong bước khắc phục sự cố, bạn có thể thêm trình nghe mapcapabilities_changed để đăng ký ánh xạ các thay đổi về chức năng. Thao tác này sẽ cho biết liệu các điều kiện sau đây đã được đáp ứng hay chưa:
- Mã bản đồ hợp lệ đang được sử dụng.
- Mã bản đồ được liên kết với một bản đồ vectơ.
Việc sử dụng Tính năng của bản đồ là không bắt buộc và chỉ nên dùng cho mục đích kiểm thử và khắc phục sự cố hoặc cho mục đích 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.
}
});