Tạo bản đồ chuyên đề

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

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 đổ bóng theo một giá trị dữ liệu. Bạn có thể 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ị bằng 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 các 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 với tên hiển thị của từng tiểu bang với một giá trị dân số bằng số. maps.FeatureStyleFunction có điều kiện tô màu từng khu vực dựa trên các giá trị trong mảng.

TypeScript

featureLayer.style = (featureStyleFunctionOptions) => {
    const placeFeature =
        featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
    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,
    };
};
index.ts

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,
    };
};
index.js

Mã ví dụ hoàn chỉnh

TypeScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const featureLayer = innerMap.getFeatureLayer(
        google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1
    );

    featureLayer.style = (featureStyleFunctionOptions) => {
        const placeFeature =
            featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
        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
    };
}

initMap();
index.ts

JavaScript

async function initMap() {
    // 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(google.maps.FeatureType.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
    };
}
initMap();
index.js

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;
}

style.css

HTML

<html>
    <head>
        <title>Choropleth Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="40.76,-101.64"
            zoom="5"
            map-id="8b37d7206ccf01219cd548d3"></gmp-map>
    </body>
</html>
index.html

Dùng thử mẫu