Để sử dụng định kiểu dựa trên dữ liệu cho các ranh giới, bạn phải tạo 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 mong muốn 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 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ơ. Đánh dấu 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 tính năng nghiêng hoặc tiêu đề sẽ ảnh hưởng xấu đến ứng dụng của bạn, hãy bỏ đánh dấu chọn Nghiêng và Xoay để người dùng không thể điều chỉnh độ nghiêng và xoay.
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.
Chọn lớp đối tượng
Trong Google API Console, bạn có thể chọn lớp tính năng để hiển thị. Thao tác này xác định những loại ranh giới sẽ xuất hiện trên bản đồ (ví dụ: các địa phương, tiểu bang, v.v.).
Để quản lý các lớp đối tượng
- Trong Google API Console, hãy truy cập vào 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 xóa lớp.
- Nhấp vào Lưu để lưu các thay đổi và làm cho chúng khả dụng trên bản đồ của bạn.
Cập nhật mã khởi tạo bản đồ của bạn
Để làm được điều này, bạn phải có mã bản đồ mà bạn vừa tạo. Bạn có thể tìm thấy ứng dụng này trên trang Quản lý Maps của mình.
- Tải API JavaScript của 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ạ 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 cách sử dụng kiểu bản đồ có bật các 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 Maps JavaScript API.
Thêm các 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 đồ
Tính năng định kiểu dựa trên dữ liệu cho ranh giới yêu cầu những khả năng được bật trong Google API Console và liên kết với mã bản đồ. Vì mã bản đồ là tạm thời và có thể thay đổi, bạn có thể gọi map.getMapCapabilities() để xác minh xem có sẵn một chức năng nhất định (ví dụ: định kiểu dựa trên dữ liệu) hay không trước khi gọi. 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ý nhận các thay đổi về chức năng ánh xạ:
// 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.
}
});