Importowanie danych GeoJSON do Map

Przegląd

Dowiedz się, jak importować dane GeoJSON ze źródła lokalnego lub zdalnego i wyświetlać je na mapie. W tym samouczku pokazujemy różne techniki importowania danych do map na poniższej mapie.

Poniższa sekcja zawiera cały kod potrzebny do utworzenia mapy w tym samouczku.

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

Zobacz próbkę

Wczytuję dane

W tej sekcji dowiesz się, jak wczytać dane z tej samej domeny co aplikacja Maps JavaScript API lub z innej domeny.

Wczytuję dane z tej samej domeny

Warstwa danych Map Google zawiera kontener na dowolne dane geoprzestrzenne (w tym GeoJSON). Jeśli dane znajdują się w pliku przechowywanym w tej samej domenie co aplikacja Maps JavaScript API, możesz wczytać je za pomocą metody map.data.loadGeoJson(). Plik musi znajdować się w tej samej domenie, ale możesz go hostować w innej subdomenie. Możesz na przykład wysłać żądanie do files.example.com z www.example.com.

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

Wczytywanie danych między domenami

Możesz też poprosić o dane z domeny innej niż Twoja, jeśli jej konfiguracja na to pozwala. Standard tego uprawnienia to Udostępnianie zasobów między domenami (CORS). Jeśli domena zezwala na żądania między domenami, jej nagłówek odpowiedzi powinien zawierać następującą deklarację:

Access-Control-Allow-Origin: *

Za pomocą Narzędzi deweloperskich w Chrome sprawdź, czy w domenie włączono CORS.

Wczytywanie danych z takiej domeny wygląda tak samo jak wczytywanie pliku JSON z tej samej domeny:

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

Wysyłam żądanie do pliku JSONP

Aby można było korzystać z tej techniki, domena docelowa musi obsługiwać żądania JSONP.

Aby zażądać JSONP, użyj createElement() w celu dodania tagu script do nagłówka dokumentu.

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

Po uruchomieniu skryptu domena docelowa przekazuje dane jako argument do innego skryptu, zwykle o nazwie callback(). Domena docelowa definiuje nazwę skryptu wywołania zwrotnego, czyli imię na stronie podczas wczytywania docelowego adresu URL w przeglądarce.

Na przykład w oknie przeglądarki wczytaj adres http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp, aby wyświetlić nazwę wywołania zwrotnego jako eqfeed_callback.

Musisz zdefiniować skrypt wywołania zwrotnego w kodzie:

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

Użyj metody addGeoJson(), aby umieścić przeanalizowane dane GeoJSON na mapie.

Określanie stylu danych

Możesz zmienić wygląd danych, dodając dane GeoJSON do obiektu Map. Więcej informacji o określaniu stylu danych znajdziesz w przewodniku dla programistów.

Więcej informacji

  • GeoJSON to powszechnie stosowany otwarty format do kodowania danych geograficznych oparty na formacie JSON (JavaScript Object Notation). Narzędzia i metody JavaScript zaprojektowane pod kątem danych JSON również działają z GeoJSON. Więcej informacji znajdziesz w przewodniku dla programistów.
  • JSONP to skrót od dopełnionego kodu JSON. Jest to metoda komunikacji używana w programach JavaScript, które działają w przeglądarkach, do żądania danych z serwerów w innej domenie.