Hãy làm theo các bước sau để thiết lập kiểu dựa trên dữ liệu cho cá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 cho tập dữ liệu, bạn cần có: dự án trên Google Cloud có tài khoản thanh toán và cả Maps JavaScript API lẫn Maps Datasets API đã 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ạ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 Cloud. Đặt loại Bản đồ thành JavaScript rồi chọn tuỳ chọn Vector (Vectơ).
Cung cấp mã bản đồ bằng thuộc tính mapId khi bạn tạo bản sao 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 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 chạy bản đồ
Để sử dụng kiểu dựa trên dữ liệu cho 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ã ứng dụng, như minh hoạ ở đây (sử dụng v=beta trong thẻ script API):
<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)
Bạn cần có mã bản đồ để định kiểu dựa trên dữ liệu cho tập dữ liệu. Nếu thiếu mã bản đồ hoặc mã bản đồ không hợp lệ được truyền, thì các tính năng dữ liệu sẽ không tải được. Để khắc phục sự cố, bạn có thể thêm trình nghe mapcapabilities_changed để đăng ký các thay đổi về chức năng của bản đồ. Điều này sẽ cho biết liệu các điều kiện sau đây có được đáp ứng hay không:
- Bạn đang sử dụng mã bản đồ hợp lệ.
- Mã bản đồ được liên kết với bản đồ vectơ.
Bạn không bắt buộc phải sử dụng các tính năng của Bản đồ và chỉ nên sử 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.
}
});