Übersicht
Hier erfahren Sie, wie Sie GeoJSON-Daten aus einer lokalen oder Remote-Quelle importieren und auf der Karte anzeigen. Wir werden die folgende Karte verwenden, um verschiedene Verfahren zum Importieren von Daten in Karten zu veranschaulichen.
Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte in dieser Anleitung benötigen.
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;
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;
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;
}
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>
Testbeispiel
Daten laden
In diesem Abschnitt erfahren Sie, wie Sie Daten aus der Domain Ihrer Maps JavaScript API-Anwendung oder einer anderen Domain laden.
Daten aus derselben Domain laden
Die Google Maps Data-Ebene stellt einen Container für jegliche Geoinformationen bereit, einschließlich GeoJSON. Befinden sich die Daten in einer Datei, die auf derselben Domain wie Ihre Maps JavaScript API-Anwendung gehostet wird, können Sie sie mit der Methode map.data.loadGeoJson() laden. Die Datei muss sich in derselben Domain befinden, kann aber in einer anderen Subdomain gehostet werden. Beispielsweise wäre eine Anfrage an dateien.beispiel.de von www.beispiel.de möglich.
map.data.loadGeoJson('data.json');
Daten aus einer anderen Domain laden
Sie können auch Daten aus einer anderen Domain anfordern, sofern deren Konfiguration solche Anfragen zulässt. Der Mechanismus, durch den das ermöglicht wird, heißt Cross-Origin Resource Sharing (CORS). Falls domainübergreifende Anfragen für eine Domain zulässig sind, muss der Antwortheader die folgende Deklaration enthalten:
Access-Control-Allow-Origin: *
Mit den Chrome-Entwicklertools (Entwicklertools) lässt sich herausfinden, ob CORS für eine Domain aktiviert ist.
Der Ablauf für das Laden von Daten aus einer solchen Domain entspricht dem für das Laden von JSON aus derselben Domain:
map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');
JSONP anfordern
Die Zieldomain muss Anfragen für JSONP unterstützen, damit dieses Verfahren verwendet werden kann.
Wenn Sie JSONP anfordern möchten, verwenden Sie createElement(), um ein script-Tag in den Kopf Ihres Dokuments einzufügen:
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);
Wenn das Skript ausgeführt wird, übergibt die Zieldomain die Daten als Argument an ein anderes Skript. Dieses hat normalerweise den Namen callback(). Der Name des Callback-Skripts richtet sich nach der Zieldomain. Es ist der erste Name auf der Seite, wenn Sie die Ziel-URL in einem Browser laden.
Wenn Sie beispielsweise http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp in Ihr Browserfenster laden, wird eqfeed_callback als Callback-Name angezeigt.
Sie müssen das Callback-Skript in Ihrem Code definieren:
function eqfeed_callback(response) {
map.data.addGeoJson(response);
}
Verwenden Sie die Methode addGeoJson(), um die geparsten GeoJSON-Daten auf der Karte zu platzieren.
Datendarstellung gestalten
Sie können die Darstellung der Daten ändern, indem Sie einem Map-Objekt GeoJSON-Daten hinzufügen. Weitere Informationen finden Sie im Entwicklerhandbuch.
Weitere Informationen
- GeoJSON ist ein gängiges offenes Format für die Codierung geografischer Daten, das auf JSON (JavaScript Object Notation) beruht. JavaScript-Tools und ‑Methoden für JSON-Daten funktionieren auch mit GeoJSON. Weitere Informationen finden Sie im Entwicklerhandbuch.
- JSONP steht für JSON mit Padding. Es ist eine Kommunikationsmethode und wird in JavaScript-Programmen verwendet, die in Webbrowsern ausgeführt werden, um Daten von einem Server in einer anderen Domain anzufordern.