總覽
本教學課程說明如何在 Google 地圖上以視覺化方式呈現資料。舉例來說，課程中的地圖會以視覺化方式呈現地震發生的位置和規模。不妨學習一些實用技巧，搭配自己的資料來源，在 Google 地圖上呈現有說服力的資訊，範例如下。
上方前 2 個頁框 (從左到右) 顯示的地圖包含基本標記和尺寸經過調整的圓形，最後一個頁框則顯示熱視圖。
匯入資料
本教學課程使用美國地質調查局 (USGS) 的即時地震資料。USGS 網站提供多種格式資料，您可以複製到自己網域，應用程式即可在本機存取這些資料。本教學課程會在文件標頭附加 script 標記，直接從 USGS 伺服器要求 JSONP。
// Create a script tag and set the USGS URL as the source. var script = document.createElement('script'); script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp'; document.getElementsByTagName('head')[0].appendChild(script);
放置基本標記
將 USGS 動態饋給的地震位置相關資料擷取到應用程式後，即可在地圖上顯示。此處會用匯入資料，將基本標記放在各地震位置震央，進一步建立地圖。
本節下方備有完整程式碼，可供您在課程中建立地圖使用。
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: new google.maps.LatLng(2.8, -187.3), mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. const eqfeed_callback = function (results: any) { for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); new google.maps.Marker({ position: latLng, map: map, }); } }; declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: new google.maps.LatLng(2.8, -187.3), mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. const eqfeed_callback = function (results) { for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); new google.maps.Marker({ position: latLng, map: map, }); } }; window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Markers</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script 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>
測試範例
使用形狀和熱視圖自訂地圖
這個部分說明在地圖上自訂多樣化資料集的其他方法。在上一節中，我們建立的地圖顯示了各個地震位置的標記。您可以自訂標記，用視覺化方式呈現其他資料，例如地震最頻繁的地區，以及地震規模或深度。
自訂基本標記的部分選項如下：
使用圓形尺寸：
您可以使用符號，透過各種大小的圓形 (或任何其他形狀)，表達地震規模。若用這種方式，地圖上最大的圓形就表示強烈地震。使用熱視圖：
用視覺化程式庫中的熱視圖圖層顯示地震分布情形，是簡單又有效的方法。熱視圖使用顏色表示地震點密度，方便您找出地震較頻繁的區域。熱視圖也可以使用WeightedLocations達到其他效果，像是用更醒目的方式顯示較大地震。
圓形尺寸
下方地圖使用圓形顯示自訂標記。特定位置的地震規模越大，圓形尺寸也會越大。
下方顯示建立含自訂圓形標記地圖時，會用到的完整程式碼。
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); map.data.setStyle((feature) => { const magnitude = feature.getProperty("mag") as number; return { icon: getCircle(magnitude), }; }); } function getCircle(magnitude: number) { return { path: google.maps.SymbolPath.CIRCLE, fillColor: "red", fillOpacity: 0.2, scale: Math.pow(2, magnitude) / 2, strokeColor: "white", strokeWeight: 0.5, }; } function eqfeed_callback(results: any) { map.data.addGeoJson(results); } declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); map.data.setStyle((feature) => { const magnitude = feature.getProperty("mag"); return { icon: getCircle(magnitude), }; }); } function getCircle(magnitude) { return { path: google.maps.SymbolPath.CIRCLE, fillColor: "red", fillOpacity: 0.2, scale: Math.pow(2, magnitude) / 2, strokeColor: "white", strokeWeight: 0.5, }; } function eqfeed_callback(results) { map.data.addGeoJson(results); } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Circles</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script 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>
測試範例
熱視圖
熱視圖能顯示 USGS 回報的地震分布情形，便於查看與理解。這類地圖並不會在各震央放置標記，而是使用顏色和形狀來表示資料分布情形。在這個範例中，紅色代表地震較頻繁的區域。
下方顯示建立這張地圖時所需的完整程式碼。
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } function eqfeed_callback(results: any) { const heatmapData: google.maps.LatLng[] = []; for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } const heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map, }); } declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } function eqfeed_callback(results) { const heatmapData = []; for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } const heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map, }); } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Heatmap</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script 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&libraries=visualization&v=weekly" defer ></script> </body> </html>
測試範例
更多資訊
進一步瞭解下列主題：