نظرة عامة
يوضح لك هذا الدليل التوجيهي كيفية عرض البيانات من مصادر متعددة على خريطة Google. على سبيل المثال، تستخدم خريطة التوزيعات ذات التظليل المساحي أدناه مصدرَين مختلفَين لتسليط الضوء على عدة ولايات في الولايات المتحدة الأمريكية وعرض البيانات الخاصة بكل ولاية.
تستخدم الخريطة بيانات من ملف GeoJSON لعرض المضلّعات التي تحدِّد حدود الولايات الأمريكية. ويمكنه أيضًا عرض بيانات على الخريطة المقابلة لكل ولاية، والتي تأتي من محاكاة طلب بحث إلى واجهة برمجة التطبيقات لتعداد الولايات المتحدة.
حدد فئة من البيانات من القائمة المنسدلة التحكم لتحديث المضلعات على الخريطة. يمكنك أيضًا تمرير مؤشر الماوس فوق مضلّع الحالة لعرض المعلومات الخاصة بالولاية في عنصر تحكّم مربّع البيانات على الخريطة.
يوضح النموذج أدناه الرمز الكامل الذي تحتاجه لإنشاء هذه الخريطة.
TypeScript
const mapStyle: google.maps.MapTypeStyle[] = [ { stylers: [{ visibility: "off" }], }, { featureType: "landscape", elementType: "geometry", stylers: [{ visibility: "on" }, { color: "#fcfcfc" }], }, { featureType: "water", elementType: "geometry", stylers: [{ visibility: "on" }, { color: "#bfd4ff" }], }, ]; let map: google.maps.Map; let censusMin = Number.MAX_VALUE, censusMax = -Number.MAX_VALUE; function initMap(): void { // load the map map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: { lat: 40, lng: -100 }, zoom: 4, styles: mapStyle, }); // set up the style rules and events for google.maps.Data map.data.setStyle(styleFeature); map.data.addListener("mouseover", mouseInToRegion); map.data.addListener("mouseout", mouseOutOfRegion); // wire up the button const selectBox = document.getElementById( "census-variable" ) as HTMLSelectElement; google.maps.event.addDomListener(selectBox, "change", () => { clearCensusData(); loadCensusData(selectBox.options[selectBox.selectedIndex].value); }); // state polygons only need to be loaded once, do them now loadMapShapes(); } /** Loads the state boundary polygons from a GeoJSON source. */ function loadMapShapes() { // load US state outline polygons from a GeoJson file map.data.loadGeoJson( "https://storage.googleapis.com/mapsdevsite/json/states.js", { idPropertyName: "STATE" } ); // wait for the request to complete by listening for the first feature to be // added google.maps.event.addListenerOnce(map.data, "addfeature", () => { google.maps.event.trigger( document.getElementById("census-variable") as HTMLElement, "change" ); }); } /** * Loads the census data from a simulated API call to the US Census API. * * @param {string} variable */ function loadCensusData(variable: string) { // load the requested variable from the census API (using local copies) const xhr = new XMLHttpRequest(); xhr.open("GET", variable + ".json"); xhr.onload = function () { const censusData = JSON.parse(xhr.responseText) as any; censusData.shift(); // the first row contains column names censusData.forEach((row: string) => { const censusVariable = parseFloat(row[0]); const stateId = row[1]; // keep track of min and max values if (censusVariable < censusMin) { censusMin = censusVariable; } if (censusVariable > censusMax) { censusMax = censusVariable; } const state = map.data.getFeatureById(stateId); // update the existing row with the new data if (state) { state.setProperty("census_variable", censusVariable); } }); // update and display the legend (document.getElementById("census-min") as HTMLElement).textContent = censusMin.toLocaleString(); (document.getElementById("census-max") as HTMLElement).textContent = censusMax.toLocaleString(); }; xhr.send(); } /** Removes census data from each shape on the map and resets the UI. */ function clearCensusData() { censusMin = Number.MAX_VALUE; censusMax = -Number.MAX_VALUE; map.data.forEach((row) => { row.setProperty("census_variable", undefined); }); (document.getElementById("data-box") as HTMLElement).style.display = "none"; (document.getElementById("data-caret") as HTMLElement).style.display = "none"; } /** * Applies a gradient style based on the 'census_variable' column. * This is the callback passed to data.setStyle() and is called for each row in * the data set. Check out the docs for Data.StylingFunction. * * @param {google.maps.Data.Feature} feature */ function styleFeature(feature: google.maps.Data.Feature) { const low = [5, 69, 54]; // color of smallest datum const high = [151, 83, 34]; // color of largest datum // delta represents where the value sits between the min and max const delta = (feature.getProperty("census_variable") - censusMin) / (censusMax - censusMin); const color: number[] = []; for (let i = 0; i < 3; i++) { // calculate an integer color based on the delta color.push((high[i] - low[i]) * delta + low[i]); } // determine whether to show this shape or not let showRow = true; if ( feature.getProperty("census_variable") == null || isNaN(feature.getProperty("census_variable")) ) { showRow = false; } let outlineWeight = 0.5, zIndex = 1; if (feature.getProperty("state") === "hover") { outlineWeight = zIndex = 2; } return { strokeWeight: outlineWeight, strokeColor: "#fff", zIndex: zIndex, fillColor: "hsl(" + color[0] + "," + color[1] + "%," + color[2] + "%)", fillOpacity: 0.75, visible: showRow, }; } /** * Responds to the mouse-in event on a map shape (state). * * @param {?google.maps.MapMouseEvent} e */ function mouseInToRegion(e: any) { // set the hover state so the setStyle function can change the border e.feature.setProperty("state", "hover"); const percent = ((e.feature.getProperty("census_variable") - censusMin) / (censusMax - censusMin)) * 100; // update the label (document.getElementById("data-label") as HTMLElement).textContent = e.feature.getProperty("NAME"); (document.getElementById("data-value") as HTMLElement).textContent = e.feature .getProperty("census_variable") .toLocaleString(); (document.getElementById("data-box") as HTMLElement).style.display = "block"; (document.getElementById("data-caret") as HTMLElement).style.display = "block"; (document.getElementById("data-caret") as HTMLElement).style.paddingLeft = percent + "%"; } /** * Responds to the mouse-out event on a map shape (state). * */ function mouseOutOfRegion(e: any) { // reset the hover state, returning the border to normal e.feature.setProperty("state", "normal"); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
const mapStyle = [ { stylers: [{ visibility: "off" }], }, { featureType: "landscape", elementType: "geometry", stylers: [{ visibility: "on" }, { color: "#fcfcfc" }], }, { featureType: "water", elementType: "geometry", stylers: [{ visibility: "on" }, { color: "#bfd4ff" }], }, ]; let map; let censusMin = Number.MAX_VALUE, censusMax = -Number.MAX_VALUE; function initMap() { // load the map map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40, lng: -100 }, zoom: 4, styles: mapStyle, }); // set up the style rules and events for google.maps.Data map.data.setStyle(styleFeature); map.data.addListener("mouseover", mouseInToRegion); map.data.addListener("mouseout", mouseOutOfRegion); // wire up the button const selectBox = document.getElementById("census-variable"); google.maps.event.addDomListener(selectBox, "change", () => { clearCensusData(); loadCensusData(selectBox.options[selectBox.selectedIndex].value); }); // state polygons only need to be loaded once, do them now loadMapShapes(); } /** Loads the state boundary polygons from a GeoJSON source. */ function loadMapShapes() { // load US state outline polygons from a GeoJson file map.data.loadGeoJson( "https://storage.googleapis.com/mapsdevsite/json/states.js", { idPropertyName: "STATE" }, ); // wait for the request to complete by listening for the first feature to be // added google.maps.event.addListenerOnce(map.data, "addfeature", () => { google.maps.event.trigger( document.getElementById("census-variable"), "change", ); }); } /** * Loads the census data from a simulated API call to the US Census API. * * @param {string} variable */ function loadCensusData(variable) { // load the requested variable from the census API (using local copies) const xhr = new XMLHttpRequest(); xhr.open("GET", variable + ".json"); xhr.onload = function () { const censusData = JSON.parse(xhr.responseText); censusData.shift(); // the first row contains column names censusData.forEach((row) => { const censusVariable = parseFloat(row[0]); const stateId = row[1]; // keep track of min and max values if (censusVariable < censusMin) { censusMin = censusVariable; } if (censusVariable > censusMax) { censusMax = censusVariable; } const state = map.data.getFeatureById(stateId); // update the existing row with the new data if (state) { state.setProperty("census_variable", censusVariable); } }); // update and display the legend document.getElementById("census-min").textContent = censusMin.toLocaleString(); document.getElementById("census-max").textContent = censusMax.toLocaleString(); }; xhr.send(); } /** Removes census data from each shape on the map and resets the UI. */ function clearCensusData() { censusMin = Number.MAX_VALUE; censusMax = -Number.MAX_VALUE; map.data.forEach((row) => { row.setProperty("census_variable", undefined); }); document.getElementById("data-box").style.display = "none"; document.getElementById("data-caret").style.display = "none"; } /** * Applies a gradient style based on the 'census_variable' column. * This is the callback passed to data.setStyle() and is called for each row in * the data set. Check out the docs for Data.StylingFunction. * * @param {google.maps.Data.Feature} feature */ function styleFeature(feature) { const low = [5, 69, 54]; // color of smallest datum const high = [151, 83, 34]; // color of largest datum // delta represents where the value sits between the min and max const delta = (feature.getProperty("census_variable") - censusMin) / (censusMax - censusMin); const color = []; for (let i = 0; i < 3; i++) { // calculate an integer color based on the delta color.push((high[i] - low[i]) * delta + low[i]); } // determine whether to show this shape or not let showRow = true; if ( feature.getProperty("census_variable") == null || isNaN(feature.getProperty("census_variable")) ) { showRow = false; } let outlineWeight = 0.5, zIndex = 1; if (feature.getProperty("state") === "hover") { outlineWeight = zIndex = 2; } return { strokeWeight: outlineWeight, strokeColor: "#fff", zIndex: zIndex, fillColor: "hsl(" + color[0] + "," + color[1] + "%," + color[2] + "%)", fillOpacity: 0.75, visible: showRow, }; } /** * Responds to the mouse-in event on a map shape (state). * * @param {?google.maps.MapMouseEvent} e */ function mouseInToRegion(e) { // set the hover state so the setStyle function can change the border e.feature.setProperty("state", "hover"); const percent = ((e.feature.getProperty("census_variable") - censusMin) / (censusMax - censusMin)) * 100; // update the label document.getElementById("data-label").textContent = e.feature.getProperty("NAME"); document.getElementById("data-value").textContent = e.feature .getProperty("census_variable") .toLocaleString(); document.getElementById("data-box").style.display = "block"; document.getElementById("data-caret").style.display = "block"; document.getElementById("data-caret").style.paddingLeft = percent + "%"; } /** * Responds to the mouse-out event on a map shape (state). * */ function mouseOutOfRegion(e) { // reset the hover state, returning the border to normal e.feature.setProperty("state", "normal"); } window.initMap = initMap;
CSS
html, body, #map { height: 100%; margin: 0; padding: 0; overflow: hidden; } .nicebox { position: absolute; text-align: center; font-family: "Roboto", "Arial", sans-serif; font-size: 13px; z-index: 5; box-shadow: 0 4px 6px -4px #333; padding: 5px 10px; background: rgb(255, 255, 255); background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(245, 245, 245) 100%); border: rgb(229, 229, 229) 1px solid; } #controls { top: 10px; left: 110px; width: 360px; height: 45px; } #data-box { top: 10px; left: 500px; height: 45px; line-height: 45px; display: none; } #census-variable { width: 360px; height: 20px; } #legend { display: flex; display: -webkit-box; padding-top: 7px; } .color-key { background: linear-gradient(to right, hsl(5, 69%, 54%) 0%, hsl(29, 71%, 51%) 17%, hsl(54, 74%, 47%) 33%, hsl(78, 76%, 44%) 50%, hsl(102, 78%, 41%) 67%, hsl(127, 81%, 37%) 83%, hsl(151, 83%, 34%) 100%); flex: 1; -webkit-box-flex: 1; margin: 0 5px; text-align: left; font-size: 1em; line-height: 1em; } #data-value { font-size: 2em; font-weight: bold; } #data-label { font-size: 2em; font-weight: normal; padding-right: 10px; } #data-label:after { content: ":"; } #data-caret { margin-left: -5px; display: none; font-size: 14px; width: 14px; }
HTML
<html> <head> <title>Mashups with google.maps.Data</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="controls" class="nicebox"> <div> <select id="census-variable"> <option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE" > Percent of population over 25 that completed high school </option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0017E" > Median age </option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0001E" > Total population </option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0016E" > Average family size </option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP03_0088E" > Per-capita income </option> </select> </div> <div id="legend"> <div id="census-min">min</div> <div class="color-key"><span id="data-caret">◆</span></div> <div id="census-max">max</div> </div> </div> <div id="data-box" class="nicebox"> <label id="data-label" for="data-value"></label> <span id="data-value"></span> </div> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
تجربة العينة
البدء
يمكنك إعداد نسختك الخاصة من خريطة التوزيعات ذات التظليل المساحي هذه باستخدام التعليمة البرمجية في هذا البرنامج التعليمي.
للبدء في ذلك، أنشِئ ملفًا جديدًا في محرِّر النصوص واحفظه باسم index.html
.
اقرأ الأقسام التالية لفهم الرمز الذي يمكنك إضافته إلى هذا الملف.
إنشاء خريطة أساسية
يشرح هذا القسم الرمز الذي يقوم بإعداد الخريطة الأساسية. وقد يكون هذا مشابهًا لطريقة إنشاء الخرائط عند بدء استخدام Maps JavaScript API.
انسخ الرمز أدناه في ملف index.html
. يؤدي هذا الرمز إلى تحميل واجهة برمجة تطبيقات JavaScript للخرائط،
مما يجعل الخريطة في وضع ملء الشاشة.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Mashups with google.maps.Data</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// load the map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40, lng: -100},
zoom: 4,
styles: mapStyle
});
var mapStyle = [{
'featureType': 'all',
'elementType': 'all',
'stylers': [{'visibility': 'off'}]
}, {
'featureType': 'landscape',
'elementType': 'geometry',
'stylers': [{'visibility': 'on'}, {'color': '#fcfcfc'}]
}, {
'featureType': 'water',
'elementType': 'labels',
'stylers': [{'visibility': 'off'}]
}, {
'featureType': 'water',
'elementType': 'geometry',
'stylers': [{'visibility': 'on'}, {'hue': '#5f94ff'}, {'lightness': 60}]
}];
}
</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
الرمز المتوفّر ضمن علامة النص البرمجي الأولى هو نقطة البداية التي تشغّل البرنامج عن طريق إنشاء
دالة تُسمى initMap
تؤدي إلى إعداد كائن الخريطة.
تعمل أنماط التصميم في الرمز أعلاه على إيقاف إمكانية رؤية كل
featureTypes
على الخريطة، مثل الطرق ونقاط الاهتمام والمعالم الطبيعية والمناطق
الإدارية وجميع elementTypes
الخاصة بها. للحصول على قائمة بجميع القيم المتاحة للسمتَين featureType
وelementType
، راجِع مرجع نمط JSON.
انقر على YOUR_API_KEY
في نموذج الرمز، أو اتّبِع التعليمات
للحصول على مفتاح واجهة برمجة التطبيقات.
استبدِل YOUR_API_KEY
بمفتاح واجهة برمجة التطبيقات الخاص بتطبيقك. بعد تحميل واجهة برمجة التطبيقات
بالكامل، تنفّذ مَعلمة معاودة الاتصال في علامة النص البرمجي أدناه الدالة initMap()
في ملف HTML.
<script> defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>
إنشاء عنصر التحكم في الخريطة وتصميمه
يُنشئ الرمز أدناه عناصر التحكم التالية على الخريطة:
- عنصر تحكم يحتوي على قائمة منسدلة تحتوي على 5 خيارات بيانات مختلفة.
- وسيلة إيضاح الخريطة.
- مربّع بيانات يعرض بيانات خاصة بالحالة والتي تظهر عند تحريك الماوس فوق مضلّع.
<div id="controls" class="nicebox"> <div> <select id="census-variable"> <option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0066PE">Percent of population over 25 that completed high school</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0017E">Median age</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP05_0001E">Total population</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP02_0016E">Average family size</option> <option value="https://storage.googleapis.com/mapsdevsite/json/DP03_0088E">Per-capita income</option> </select> </div> <div id="legend"> <div id="census-min">min</div> <div class="color-key"><span id="data-caret">◆</span></div> <div id="census-max">max</div> </div> </div> <div id="data-box" class="nicebox"> <label id="data-label" for="data-value"></label> <span id="data-value"></span> </div>
يمكنك استخدام الرمز أدناه داخل علامات style
لاختيار تصميم عناصر التحكّم في الخريطة.
<style> html, body, #map { height: 100%; margin: 0; padding: 0; overflow: hidden; } .nicebox { position: absolute; text-align: center; font-family: "Roboto", "Arial", sans-serif; font-size: 13px; z-index: 5; box-shadow: 0 4px 6px -4px #333; padding: 5px 10px; background: rgb(255,255,255); background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%); border: rgb(229, 229, 229) 1px solid; } #controls { top: 10px; left: 110px; width: 360px; height: 45px; } #data-box { top: 10px; left: 500px; height: 45px; line-height: 45px; display: none; } #census-variable { width: 360px; height: 20px; } #legend { display: flex; display: -webkit-box; padding-top: 7px } .color-key { background: linear-gradient(to right, hsl(5, 69%, 54%) 0%, hsl(29, 71%, 51%) 17%, hsl(54, 74%, 47%) 33%, hsl(78, 76%, 44%) 50%, hsl(102, 78%, 41%) 67%, hsl(127, 81%, 37%) 83%, hsl(151, 83%, 34%) 100%); flex: 1; -webkit-box-flex: 1; margin: 0 5px; text-align: left; font-size: 1.0em; line-height: 1.0em; } #data-value { font-size: 2.0em; font-weight: bold } #data-label { font-size: 2.0em; font-weight: normal; padding-right: 10px; } #data-label:after { content: ':' } #data-caret { margin-left: -5px; display: none; font-size: 14px; width: 14px} </style>
استيراد البيانات من واجهة برمجة التطبيقات لتعداد الولايات المتحدة
يطلب الرمز أدناه مكتب تعداد الولايات المتحدة للاطّلاع على أحدث تعداد سكاني لجميع الولايات الأمريكية، والذي يتلقّاه بتنسيق JSON.
function loadCensusData(variable) {
// load the requested variable from the census API
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.census.gov/data/2012/acs5/profile?get=' +
variable + '&for=state:*&key=YOUR_API_KEY');
xhr.onload = function() {
var censusData = JSON.parse(xhr.responseText);
censusData.shift(); // the first row contains column names
censusData.forEach(function(row) {
var censusVariable = parseFloat(row[0]);
var stateId = row[1];
// keep track of min and max values
if (censusVariable < censusMin) {
censusMin = censusVariable;
}
if (censusVariable > censusMax) {
censusMax = censusVariable;
}
// update the existing row with the new data
map.data
.getFeatureById(stateId)
.setProperty('census_variable', censusVariable);
});
// update and display the legend
document.getElementById('census-min').textContent =
censusMin.toLocaleString();
document.getElementById('census-max').textContent =
censusMax.toLocaleString();
};
xhr.send();
}
نمط البيانات
ينشئ الرمز أدناه خريطة توزيعات ذات تظليل مساحي من خلال تطبيق تدرج على كل مضلّع في مجموعة البيانات،
استنادًا إلى قيمة بيانات التعداد السكاني. يمكنك وضع نمط للبيانات باستخدام كائن
Data.StyleOptions
أو دالة تعرض كائن Data.StyleOptions
.
// set up the style rules and events for google.maps.Data map.data.setStyle(styleFeature); function styleFeature(feature) { var low = [5, 69, 54]; // color of smallest datum var high = [151, 83, 34]; // color of largest datum // delta represents where the value sits between the min and max var delta = (feature.getProperty('census_variable') - censusMin) / (censusMax - censusMin); var color = []; for (var i = 0; i < 3; i++) { // calculate an integer color based on the delta color[i] = (high[i] - low[i]) * delta + low[i]; } // determine whether to show this shape or not var showRow = true; if (feature.getProperty('census_variable') == null || isNaN(feature.getProperty('census_variable'))) { showRow = false; } var outlineWeight = 0.5, zIndex = 1; if (feature.getProperty('state') === 'hover') { outlineWeight = zIndex = 2; } return { strokeWeight: outlineWeight, strokeColor: '#fff', zIndex: zIndex, fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)', fillOpacity: 0.75, visible: showRow }; }
بالإضافة إلى تلوين المضلعات، ينشئ الرمز أدناه عنصرًا تفاعليًا من خلال إضافة أحداث تستجيب لنشاط الماوس. يؤدي تمرير مؤشر الماوس فوق المضلع إلى تمييز حدود الحالة، وفي الوقت نفسه تحديث عنصر التحكم في مربع البيانات على الخريطة.
// set up the style rules and events for google.maps.Data map.data.addListener('mouseover', mouseInToRegion); map.data.addListener('mouseout', mouseOutOfRegion); /** * Responds to the mouse-in event on a map shape (state). * * @param {?google.maps.MapMouseEvent} e */ function mouseInToRegion(e) { // set the hover state so the setStyle function can change the border e.feature.setProperty('state', 'hover'); var percent = (e.feature.getProperty('census_variable') - censusMin) / (censusMax - censusMin) * 100; // update the label document.getElementById('data-label').textContent = e.feature.getProperty('NAME'); document.getElementById('data-value').textContent = e.feature.getProperty('census_variable').toLocaleString(); document.getElementById('data-box').style.display = 'block'; document.getElementById('data-caret').style.display = 'block'; document.getElementById('data-caret').style.paddingLeft = percent + '%'; } /** * Responds to the mouse-out event on a map shape (state). * * @param {?google.maps.MapMouseEvent} e */ function mouseOutOfRegion(e) { // reset the hover state, returning the border to normal e.feature.setProperty('state', 'normal'); }
تحميل المضلّعات لحدود الدولة
أضِف الرمز أدناه بعد دالة initMap
بالكامل. تُحمِّل الدالة loadMapShapes
مضلّعات لحدود الولايات الأمريكية من ملف GeoJSON، باستخدام الطريقة loadGeoJson
.
/** Loads the state boundary polygons from a GeoJSON source. */ function loadMapShapes() { // load US state outline polygons from a GeoJSON file map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/states.js', { idPropertyName: 'STATE' });
أضِف السطر أدناه إلى نهاية الدالة initMap
.
// state polygons only need to be loaded once, do them now loadMapShapes();
عند تحديد خيار مصدر بيانات من القائمة المنسدلة للتحكم في الخريطة، تطلب الخريطة واجهة برمجة التطبيقات لبيانات تعداد الولايات المتحدة للمتغيّر المحدّد. لربط بيانات التعداد السكاني ببيانات الشكل، يضبط الرمز ترميز
idPropertyName
على "STATE"، وهو مفتاح مشترك في كل من بيانات التعداد وفي خصائص GeoJson.
مزيد من المعلومات
يستخدم هذا العرض التوضيحي Census Bureau Data API، لكنّه لا يعتمده مكتب الإحصاء أو يصادق عليه.