دریافت کلید نسخه نمایشی Maps: با «کلید نسخه نمایشی Maps» برخی‌از ویژگی‌های Maps JavaScript API و «کیت میانای کاربر جاها» را بدون هزینه امتحان کنید—اطلاعات صورت‌حساب لازم نیست.

‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

دیداری‌سازی داده‌ها: نگاشت زمین‌لرزه‌ها

نمای کلی

این آموزش گام‌به‌گام به شما نشان می‌دهد چگونه داده‌ها را در Google Maps تجسم کنید. به‌عنوان مثال، نقشه‌های این آموزش داده‌های مربوط به مکان و بزرگی زمین‌لرزه‌ها را دیداری‌سازی می‌کنند. تکنیک‌های استفاده از منبع داده‌های خود را یاد بگیرید و داستان‌های قدرتمندی مانند داستان‌های زیر در Google Maps ایجاد کنید.

قاب سمت راست نقشه‌ای با نشانگرهای پایه را نمایش می‌دهد، و قاب سمت چپ نقشه‌ای با دایره‌های اندازه‌دار را نمایش می‌دهد.

داده‌های خود را وارد کنید

این آموزش گام‌به‌گام از داده‌های هم‌زمان زمین‌لرزه از «سازمان زمین‌شناسی ایالات متحده» (USGS) استفاده می‌کند. وب‌سایت USGS داده‌های خود را در قالب‌های مختلفی ارائه می‌دهد که می‌توانید آن‌ها را در دامنه خود کپی کنید تا برنامه شما به‌صورت محلی به آن‌ها دسترسی داشته باشد. این آموزش JSONP را مستقیماً از سرورهای USGS با افزودن برچسب script به سر سند درخواست می‌کند.

// 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;index.ts

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

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;
}
style.css

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>index.html

استفاده از شکل‌ها برای سفارشی‌سازی نقشه‌ها

این بخش روش دیگری را برای سفارشی‌سازی مجموعه داده‌های غنی در نقشه به شما نشان می‌دهد. نقشه ایجادشده در بخش قبلی این آموزش را درنظر بگیرید که نشانگرهایی را در هر مکان زلزله نشان می‌دهد. می‌توانید نشانگرها را سفارشی‌سازی کنید تا داده‌های بیشتری را، مثل بزرگی یا عمق، دیداری‌سازی کنید.

نقشه زیر نشانگرهای سفارشی‌شده را بااستفاده از نمادهای دایره‌ای نماد نمایش می‌دهد. اندازه هر دایره با بزرگی زمین‌لرزه‌ای که نشان می‌دهد افزایش می‌یابد.

بخش زیر کل کدی را که برای ایجاد نقشه با نشانگرهای دایره‌ای سفارشی‌شده نیاز دارید نمایش می‌دهد.

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;index.ts

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

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;
}
style.css

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>index.html

اطلاعات بیشتر

درباره موضوعات زیر بیشتر بخوانید:

دیداری‌سازی داده‌ها: نگاشت زمین‌لرزه‌ها با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

نمای کلی

داده‌های خود را وارد کنید

قرار دادن نشانگرهای پایه

TypeScript

JavaScript

CSS

HTML

استفاده از شکل‌ها برای سفارشی‌سازی نقشه‌ها

TypeScript

JavaScript

CSS

HTML

اطلاعات بیشتر

دیداری‌سازی داده‌ها: نگاشت زمین‌لرزه‌ها