ייבוא נתונים למפות 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 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, או מאפליקציה אחרת.

מתבצעת טעינה של נתונים מאותו דומיין

שכבת הנתונים של מפות Google מספקת מאגר לנתונים גיאו-מרחביים שרירותיים (כולל GeoJSON). אם הנתונים נמצאים בקובץ שמתארח באותו דומיין שבו מתארחת אפליקציית Maps JavaScript API, אפשר לטעון אותם באמצעות השיטה map.data.loadGeoJson(). הקובץ צריך להיות באותו דומיין, אבל אפשר לארח אותו בתת-דומיין אחר. לדוגמה, אפשר לשלוח בקשה אל files.example.com מהכתובת www.example.com.

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

מתבצעת טעינה של נתונים בכמה דומיינים

אפשר גם לבקש נתונים מדומיין אחר, אם ההגדרות של הדומיין מאפשרות את הבקשה הזו. התקן של ההרשאה הזו נקרא שיתוף משאבים בין מקורות (CORS). אם הדומיין אפשר בקשות בין דומיינים, כותרת התגובה שלו צריכה לכלול את ההצהרה הבאה:

Access-Control-Allow-Origin: *

השתמשו בכלים למפתחים ב-Chrome (כלים למפתחים) כדי לבדוק אם 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(). דומיין היעד מגדיר את השם של סקריפט הקריאה החוזרת, שהוא השם הראשון בדף כשטוענים את כתובת היעד בדפדפן.

לדוגמה, טוענים את הכתובת http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp בחלון הדפדפן כדי להציג את השם של הקריאה החוזרת בתור eqfeed_callback.

עליך להגדיר את סקריפט הקריאה החוזרת (callback) בקוד שלך:

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

משתמשים בשיטה addGeoJson() כדי למקם במפה את נתוני GeoJSON שנותחו.

עיצוב הנתונים

ניתן לך לשנות את מראה הנתונים על ידי הוספת נתוני GeoJSON לאובייקט מפה. מידע נוסף על עיצוב הנתונים זמין במדריך למפתחים.

מידע נוסף

  • GeoJSON הוא פורמט פתוח נפוץ לקידוד נתונים גיאוגרפיים, על סמך JSON (JavaScript Object Notation). הכלים והשיטות של JavaScript שמיועדים לנתוני JSON פועלים גם עם GeoJSON. אפשר לקרוא מידע נוסף במדריך למפתחים.
  • JSONP הוא ראשי תיבות של JSON מרופד. זוהי שיטת תקשורת שמשמשת בתוכנות JavaScript שפועלות בדפדפני אינטרנט כדי לבקש נתונים משרת בדומיין אחר.