ייבוא נתוני 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

כדאי לנסות דוגמה

טעינת נתונים

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

טעינת נתונים מאותו דומיין

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