استيراد بيانات GeoJSON إلى "خرائط Google"

نظرة عامة

تعرف على كيفية استيراد بيانات 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

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

تجربة "عيّنة"

جارٍ تحميل البيانات

يوضح لك هذا القسم كيفية تحميل البيانات من النطاق نفسه الذي تستخدمه في تطبيق Maps JavaScript API أو من نطاق مختلف.

جارٍ تحميل البيانات من النطاق نفسه

توفر طبقة بيانات خرائط Google حاوية للبيانات الجغرافية المكانية العشوائية (بما في ذلك GeoJSON). إذا كانت بياناتك في ملف مستضاف على النطاق نفسه مثل تطبيق واجهة برمجة تطبيقات JavaScript للخرائط، يمكنك تحميلها باستخدام الطريقة map.data.loadGeoJson(). يجب أن يكون الملف على النطاق نفسه، ولكن يمكنك استضافته في نطاق فرعي مختلف. على سبيل المثال، يمكنك تقديم طلب إلى files.example.com من www.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 إلى كائن خريطة. لمزيد من المعلومات حول تنسيق بياناتك، اقرأ دليل المطوِّر.

مزيد من المعلومات

  • وGeoJSON هو تنسيق مفتوح يُستخدم على نطاق واسع لترميز البيانات الجغرافية، استنادًا إلى JSON (JavaScript Object Notation). وتعمل أيضًا أدوات وأساليب JavaScript المصممة لبيانات JSON مع GeoJSON. اقرأ دليل المطوّر للحصول على مزيد من المعلومات.
  • يرمز JSONP إلى تنسيق JSON المبطّن. وهو طريقة اتصال تُستخدم في برامج JavaScript التي تعمل في متصفحات الويب، لطلب البيانات من خادم في نطاق مختلف.