وارد کردن داده ها به Maps

بررسی اجمالی

یاد بگیرید که چگونه داده های GeoJSON را از یک منبع محلی یا از راه دور وارد کنید و آن را روی نقشه خود نمایش دهید. این آموزش از نقشه زیر برای نشان دادن تکنیک های مختلف برای وارد کردن داده ها به نقشه ها استفاده می کند.

بخش زیر کل کد مورد نیاز برای ایجاد نقشه را در این آموزش نمایش می دهد.

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

جاوا اسکریپت

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>
    <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="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

Sample را امتحان کنید

در حال بارگیری داده ها

این بخش به شما نشان می دهد که چگونه داده ها را از همان دامنه ای که برنامه Maps JavaScript API خود دارید یا از دامنه دیگری بارگیری کنید.

بارگیری داده ها از همان دامنه

لایه داده Google Maps محفظه ای برای داده های مکانی دلخواه (از جمله GeoJSON) فراهم می کند. اگر داده‌های شما در فایلی است که در همان دامنه میزبان برنامه Maps JavaScript API شما قرار دارد، می‌توانید با استفاده از روش map.data.loadGeoJson() آن را بارگیری کنید. فایل باید در یک دامنه باشد، اما می توانید آن را در یک زیر دامنه متفاوت میزبانی کنید. برای مثال، می‌توانید از www.example.com درخواستی به files.example.com بدهید.

map.data.loadGeoJson('data.json');

بارگیری داده ها در دامنه ها

در صورتی که پیکربندی دامنه چنین درخواستی را اجازه دهد، می‌توانید از دامنه‌ای غیر از دامنه خود درخواست دهید. استاندارد این مجوز به اشتراک گذاری منابع متقاطع (CORS) نامیده می شود. اگر دامنه ای درخواست های متقابل دامنه را مجاز کرده باشد، سرصفحه پاسخ آن باید شامل اعلان زیر باشد:

Access-Control-Allow-Origin: *

از ابزارهای توسعه‌دهنده Chrome (DevTools) استفاده کنید تا بفهمید آیا دامنه‌ای CORS را فعال کرده است یا خیر.

بارگیری داده از چنین دامنه ای مانند بارگیری JSON از همان دامنه است:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

در حال درخواست JSONP

دامنه هدف برای استفاده از این تکنیک باید از درخواست های JSONP پشتیبانی کند.

برای درخواست JSONP، از createElement() برای اضافه کردن یک تگ script به سر سند خود استفاده کنید.

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

هنگامی که اسکریپت اجرا می شود، دامنه هدف داده ها را به عنوان آرگومان به اسکریپت دیگری که معمولاً callback() نامیده می شود، ارسال می کند. دامنه هدف، نام اسکریپت برگشت تماس را تعریف می‌کند، که اولین نامی است که در صفحه زمانی که URL مورد نظر را در مرورگر بارگیری می‌کنید.

به عنوان مثال، http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp را در پنجره مرورگر خود بارگیری کنید تا نام پاسخ به تماس به عنوان eqfeed_callback نشان داده شود.

شما باید اسکریپت برگشت تماس را در کد خود تعریف کنید:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

از متد addGeoJson() برای قرار دادن داده های GeoJSON تجزیه شده روی نقشه استفاده کنید.

استایل دادن به داده ها

می‌توانید با افزودن داده‌های GeoJSON به یک شی Map، ظاهر داده‌های خود را تغییر دهید. برای اطلاعات بیشتر در مورد سبک‌دهی داده‌هایتان، راهنمای توسعه‌دهنده را بخوانید.

بیشتر بدانید

  • GeoJSON یک فرمت باز پرکاربرد برای رمزگذاری داده های جغرافیایی است که بر اساس JSON (Notation Object JavaScript) است. ابزارها و روش های جاوا اسکریپت طراحی شده برای داده های JSON نیز با GeoJSON کار می کنند. برای اطلاعات بیشتر راهنمای توسعه دهنده را بخوانید.
  • JSONP مخفف JSON padded است. این یک روش ارتباطی است که در برنامه‌های جاوا اسکریپت که در مرورگرهای وب اجرا می‌شوند، برای درخواست داده‌ها از یک سرور در یک دامنه متفاوت استفاده می‌شود.