Bản đồ chuyên đề là một loại bản đồ chuyên đề, trong đó các khu vực hành chính được tô màu hoặc tô bóng theo giá trị dữ liệu. Bạn có thể sử dụng
google.maps.FeatureStyleFunction
để tạo kiểu cho bản đồ dựa trên một tập dữ liệu, trong đó mỗi khu vực hành chính được liên kết
với một dải giá trị số. Bản đồ ví dụ sau đây cho thấy một bản đồ chuyên đề mô tả dữ liệu dân số của tiểu bang Hoa Kỳ.
Trong ví dụ này, dữ liệu bao gồm một mảng các cặp khoá-giá trị, khớp mã địa điểm của mỗi tiểu bang với một giá trị dân số dạng số. maps.FeatureStyleFunction sẽ tô màu cho từng khu vực theo điều kiện dựa trên các giá trị trong mảng.
Để tạo bản đồ chuyên đề về các tiểu bang của Hoa Kỳ, hãy làm theo các bước sau:
- Nếu bạn chưa thực hiện, hãy làm theo các bước trong phần Bắt đầu để tạo mã bản đồ và kiểu bản đồ. Hãy nhớ bật lớp đối tượng Khu vực hành chính cấp 1 và sử dụng mã bản đồ đó khi bạn tạo bản đồ.
- Tham chiếu đến lớp đối tượng Khu vực hành chính cấp 1 khi bản đồ khởi chạy bằng cách gọi
map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_1'). Đối với Hoa Kỳ, các khu vực hành chính này là tiểu bang. - Đặt thuộc tính
styletrên lớp đối tượng thành mộtFeatureStyleFunctiontra cứu giá trị choplaceIdcủa mỗi đối tượng, như trong đoạn mã sau:
TypeScript
featureLayer.style = ( featureStyleFunctionOptions: google.maps.FeatureStyleFunctionOptions ) => { const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature; const population = states[placeFeature.placeId]; let fillColor: string | undefined; // Specify colors using any of the following: // * Named ('green') // * Hexadecimal ('#FF0000') // * RGB ('rgb(0, 0, 255)') // * HSL ('hsl(60, 100%, 50%)') if (population < 2000000) { fillColor = 'green'; } else if (population < 5000000) { fillColor = 'red'; } else if (population < 10000000) { fillColor = 'blue'; } else if (population < 40000000) { fillColor = 'yellow'; } return { fillColor, fillOpacity: 0.5, }; };
JavaScript
featureLayer.style = (featureStyleFunctionOptions) => { const placeFeature = featureStyleFunctionOptions.feature; const population = states[placeFeature.placeId]; let fillColor; // Specify colors using any of the following: // * Named ('green') // * Hexadecimal ('#FF0000') // * RGB ('rgb(0, 0, 255)') // * HSL ('hsl(60, 100%, 50%)') if (population < 2000000) { fillColor = 'green'; } else if (population < 5000000) { fillColor = 'red'; } else if (population < 10000000) { fillColor = 'blue'; } else if (population < 40000000) { fillColor = 'yellow'; } return { fillColor, fillOpacity: 0.5, }; };
Để lấy Mã địa điểm cho một vùng, hãy xem bài viết Sử dụng mã hoá địa lý API và Places API với tính năng Định kiểu dựa trên dữ liệu cho ranh giới.
Mã ví dụ hoàn chỉnh
TypeScript
async function init() { // Request needed libraries. await google.maps.importLibrary('maps'); // Get the gmp-map element. const mapElement = document.querySelector('gmp-map')!; // Get the inner map. const innerMap = mapElement.innerMap; const featureLayer = innerMap.getFeatureLayer( 'ADMINISTRATIVE_AREA_LEVEL_1' ); featureLayer.style = ( featureStyleFunctionOptions: google.maps.FeatureStyleFunctionOptions ) => { const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature; const population = states[placeFeature.placeId]; let fillColor: string | undefined; // Specify colors using any of the following: // * Named ('green') // * Hexadecimal ('#FF0000') // * RGB ('rgb(0, 0, 255)') // * HSL ('hsl(60, 100%, 50%)') if (population < 2000000) { fillColor = 'green'; } else if (population < 5000000) { fillColor = 'red'; } else if (population < 10000000) { fillColor = 'blue'; } else if (population < 40000000) { fillColor = 'yellow'; } return { fillColor, fillOpacity: 0.5, }; }; // Population data by state. const states: Record<string, number> = { ChIJdf5LHzR_hogR6czIUzU0VV4: 5039877, // Alabama ChIJG8CuwJzfAFQRNduKqSde27w: 732673, // Alaska 'ChIJaxhMy-sIK4cRcc3Bf7EnOUI': 7276316, // Arizona 'ChIJYSc_dD-e0ocR0NLf_z5pBaQ': 3025891, // Arkansas ChIJPV4oX_65j4ARVW8IJ6IJUYs: 39237836, // California ChIJt1YYm3QUQIcR_6eQSTGDVMc: 5812069, // Colorado ChIJpVER8hFT5okR5XBhBVttmq4: 3605597, // Connecticut ChIJO9YMTXYFx4kReOgEjBItHZQ: 1003384, // Delaware ChIJvypWkWV2wYgR0E7HW9MTLvc: 21781128, // Florida ChIJV4FfHcU28YgR5xBP7BC8hGY: 10799566, // Georgia ChIJBeB5Twbb_3sRKIbMdNKCd0s: 1441553, // Hawaii ChIJ6Znkhaj_WFMRWIf3FQUwa9A: 1900923, // Idaho ChIJGSZubzgtC4gRVlkRZFCCFX8: 12671469, // Illinois ChIJHRv42bxQa4gRcuwyy84vEH4: 6805985, // Indiana ChIJGWD48W9e7ocR2VnHV0pj78Y: 3193079, // Iowa 'ChIJawF8cXEXo4cRXwk-S6m0wmg': 2934582, // Kansas ChIJyVMZi0xzQogR_N_MxU5vH3c: 4509394, // Kentucky ChIJZYIRslSkIIYRA0flgTL3Vck: 4624047, // Louisiana ChIJ1YpTHd4dsEwR0KggZ2_MedY: 1372247, // Maine ChIJ35Dx6etNtokRsfZVdmU3r_I: 6165129, // Maryland ChIJ_b9z6W1l44kRHA2DVTbQxkU: 6984723, // Massachussetts ChIJEQTKxz2qTE0Rs8liellI3Zc: 10050811, // Michigan 'ChIJmwt4YJpbWE0RD6L-EJvJogI': 5707390, // Minnesota ChIJGdRK5OQyKIYR2qbc6X8XDWI: 2949965, // Mississippi ChIJfeMiSNXmwIcRcr1mBFnEW7U: 6168187, // Misssouri ChIJ04p7LZwrQVMRGGwqz1jWcfU: 1104271, // Montana ChIJ7fwMtciNk4cRxArzDwyQJ6E: 1963692, // Nebraska 'ChIJcbTe-KEKmYARs5X8qooDR88': 3143991, // Nevada ChIJ66bAnUtEs0wR64CmJa8CyNc: 1388992, // New Hampshire 'ChIJn0AAnpX7wIkRjW0_-Ad70iw': 9267130, // New Jersey ChIJqVKY50NQGIcRup41Yxpuv0Y: 2115877, // New Mexico ChIJqaUj8fBLzEwRZ5UY3sHGz90: 19835913, // New York ChIJgRo4_MQfVIgRGa4i6fUwP60: 10551162, // North Carolina 'ChIJY-nYVxKD11IRyc9egzmahA0': 774948, // North Dakota ChIJwY5NtXrpNogRFtmfnDlkzeU: 11780017, // Ohio 'ChIJnU-ssRE5rIcRSOoKQDPPHF0': 3986639, // Oklahoma ChIJVWqfm3xuk1QRdrgLettlTH0: 4246155, // Oregon ChIJieUyHiaALYgRPbQiUEchRsI: 12964056, // Pennsylvania ChIJD9cOYhQ15IkR5wbB57wYTh4: 1095610, // Rhode Island 'ChIJ49ExeWml-IgRnhcF9TKh_7k': 5190705, // South Carolina ChIJpTjphS1DfYcRt6SGMSnW8Ac: 895376, // South Dakota 'ChIJA8-XniNLYYgRVpGBpcEgPgM': 6975218, // Tennessee ChIJSTKCCzZwQIYRPN4IGI8c6xY: 29527941, // Texas ChIJzfkTj8drTIcRP0bXbKVK370: 3337975, // Utah ChIJ_87aSGzctEwRtGtUNnSJTSY: 645570, // Vermont ChIJzbK8vXDWTIgRlaZGt0lBTsA: 8642274, // Virginia 'ChIJ-bDD5__lhVQRuvNfbGh4QpQ': 7738692, // Washington ChIJRQnL1KVUSogRQzrN3mjHALs: 1782959, // West Virginia 'ChIJr-OEkw_0qFIR1kmG-LjV1fI': 5895908, // Wisconsin ChIJaS7hSDTiXocRLzh90nkisCY: 578803, // Wyoming }; } void init();
JavaScript
async function init() { // Request needed libraries. await google.maps.importLibrary('maps'); // Get the gmp-map element. const mapElement = document.querySelector('gmp-map'); // Get the inner map. const innerMap = mapElement.innerMap; const featureLayer = innerMap.getFeatureLayer( 'ADMINISTRATIVE_AREA_LEVEL_1' ); featureLayer.style = (featureStyleFunctionOptions) => { const placeFeature = featureStyleFunctionOptions.feature; const population = states[placeFeature.placeId]; let fillColor; // Specify colors using any of the following: // * Named ('green') // * Hexadecimal ('#FF0000') // * RGB ('rgb(0, 0, 255)') // * HSL ('hsl(60, 100%, 50%)') if (population < 2000000) { fillColor = 'green'; } else if (population < 5000000) { fillColor = 'red'; } else if (population < 10000000) { fillColor = 'blue'; } else if (population < 40000000) { fillColor = 'yellow'; } return { fillColor, fillOpacity: 0.5, }; }; // Population data by state. const states = { ChIJdf5LHzR_hogR6czIUzU0VV4: 5039877, // Alabama ChIJG8CuwJzfAFQRNduKqSde27w: 732673, // Alaska 'ChIJaxhMy-sIK4cRcc3Bf7EnOUI': 7276316, // Arizona 'ChIJYSc_dD-e0ocR0NLf_z5pBaQ': 3025891, // Arkansas ChIJPV4oX_65j4ARVW8IJ6IJUYs: 39237836, // California ChIJt1YYm3QUQIcR_6eQSTGDVMc: 5812069, // Colorado ChIJpVER8hFT5okR5XBhBVttmq4: 3605597, // Connecticut ChIJO9YMTXYFx4kReOgEjBItHZQ: 1003384, // Delaware ChIJvypWkWV2wYgR0E7HW9MTLvc: 21781128, // Florida ChIJV4FfHcU28YgR5xBP7BC8hGY: 10799566, // Georgia ChIJBeB5Twbb_3sRKIbMdNKCd0s: 1441553, // Hawaii ChIJ6Znkhaj_WFMRWIf3FQUwa9A: 1900923, // Idaho ChIJGSZubzgtC4gRVlkRZFCCFX8: 12671469, // Illinois ChIJHRv42bxQa4gRcuwyy84vEH4: 6805985, // Indiana ChIJGWD48W9e7ocR2VnHV0pj78Y: 3193079, // Iowa 'ChIJawF8cXEXo4cRXwk-S6m0wmg': 2934582, // Kansas ChIJyVMZi0xzQogR_N_MxU5vH3c: 4509394, // Kentucky ChIJZYIRslSkIIYRA0flgTL3Vck: 4624047, // Louisiana ChIJ1YpTHd4dsEwR0KggZ2_MedY: 1372247, // Maine ChIJ35Dx6etNtokRsfZVdmU3r_I: 6165129, // Maryland ChIJ_b9z6W1l44kRHA2DVTbQxkU: 6984723, // Massachussetts ChIJEQTKxz2qTE0Rs8liellI3Zc: 10050811, // Michigan 'ChIJmwt4YJpbWE0RD6L-EJvJogI': 5707390, // Minnesota ChIJGdRK5OQyKIYR2qbc6X8XDWI: 2949965, // Mississippi ChIJfeMiSNXmwIcRcr1mBFnEW7U: 6168187, // Misssouri ChIJ04p7LZwrQVMRGGwqz1jWcfU: 1104271, // Montana ChIJ7fwMtciNk4cRxArzDwyQJ6E: 1963692, // Nebraska 'ChIJcbTe-KEKmYARs5X8qooDR88': 3143991, // Nevada ChIJ66bAnUtEs0wR64CmJa8CyNc: 1388992, // New Hampshire 'ChIJn0AAnpX7wIkRjW0_-Ad70iw': 9267130, // New Jersey ChIJqVKY50NQGIcRup41Yxpuv0Y: 2115877, // New Mexico ChIJqaUj8fBLzEwRZ5UY3sHGz90: 19835913, // New York ChIJgRo4_MQfVIgRGa4i6fUwP60: 10551162, // North Carolina 'ChIJY-nYVxKD11IRyc9egzmahA0': 774948, // North Dakota ChIJwY5NtXrpNogRFtmfnDlkzeU: 11780017, // Ohio 'ChIJnU-ssRE5rIcRSOoKQDPPHF0': 3986639, // Oklahoma ChIJVWqfm3xuk1QRdrgLettlTH0: 4246155, // Oregon ChIJieUyHiaALYgRPbQiUEchRsI: 12964056, // Pennsylvania ChIJD9cOYhQ15IkR5wbB57wYTh4: 1095610, // Rhode Island 'ChIJ49ExeWml-IgRnhcF9TKh_7k': 5190705, // South Carolina ChIJpTjphS1DfYcRt6SGMSnW8Ac: 895376, // South Dakota 'ChIJA8-XniNLYYgRVpGBpcEgPgM': 6975218, // Tennessee ChIJSTKCCzZwQIYRPN4IGI8c6xY: 29527941, // Texas ChIJzfkTj8drTIcRP0bXbKVK370: 3337975, // Utah ChIJ_87aSGzctEwRtGtUNnSJTSY: 645570, // Vermont ChIJzbK8vXDWTIgRlaZGt0lBTsA: 8642274, // Virginia 'ChIJ-bDD5__lhVQRuvNfbGh4QpQ': 7738692, // Washington ChIJRQnL1KVUSogRQzrN3mjHALs: 1782959, // West Virginia 'ChIJr-OEkw_0qFIR1kmG-LjV1fI': 5895908, // Wisconsin ChIJaS7hSDTiXocRLzh90nkisCY: 578803, // Wyoming }; } void init();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html>
<head>
<title>Choropleth Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(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: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<gmp-map
center="40.76,-101.64"
zoom="5"
map-id="8b37d7206ccf01219cd548d3"></gmp-map>
</body>
</html>