Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Geometry-Bibliothek

  1. Übersicht
  2. Konzepte der sphärischen Geometrie
    1. Entfernungs- und Bereichsfunktionen
    2. Navigationsfunktionen
  3. Geometriecodierung
  4. Polygon- und Polylinienfunktionen
    1. containsLocation()
    2. isLocationOnEdge()

Übersicht

Die Konzepte in diesem Dokument beziehen sich auf Funktionen, die ausschließlich in der Bibliothek google.maps.geometry enthalten sind. Diese Bibliothek wird nicht standardmäßig beim Laden von Maps Javascript API geöffnet, sondern muss explizit mithilfe des Bootstrap-Parameters libraries angegeben werden.

Weitere Informationen finden Sie unter Übersicht über Bibliotheken.

Die Geometry-Bibliothek von Google Maps JavaScript API bietet Hilfsprogrammfunktionen für die Berechnung geometrischer Daten auf der Oberfläche der Erde. Die Bibliothek umfasst drei Namensräume:

  • spherical enthält sphärische geometrische Hilfsprogramme, mithilfe derer Sie Winkel, Entfernungen und Bereiche aus Breiten- und Längenangaben berechnen können.
  • encoding enthält Hilfsprogramme für die Codierung und Decodierung von Polylinienpfaden gemäß dem Codierten Polylinienalgorithmus.
  • poly enthält Hilfsprogrammfunktionen für Berechnungen im Zusammenhang mit Polygonen und Polylinien.

Die Bibliothek google.maps.geometry enthält keine Klassen; stattdessen umfasst die Bibliothek statische Methoden zu den obigen Namensräumen.

Konzepte der sphärischen Geometrie

Die Bilder in Google Maps JavaScript API sind zweidimensional und somit „flach“. Die Erde ist jedoch dreidimensional und wird häufig als Näherungswert eines abgeflachten Sphäroids oder vereinfacht als Kugel definiert. In Maps API verwenden wir eine Kugel, und um die Erde auf einer zweidimensionalen, flachen Oberfläche – z. B. einem Computerbildschirm – darzustellen, wird in Maps API eine Projektion verwendet.

Bei 2D-Projektionen kann das Erscheinungsbild gelegentlich trügerisch sein. Da die Kartenprojektion eine gewisse Verzerrung erfordert, kann Euklidische Geometrie häufig nicht zur Anwendung kommen. Beispielsweise ist die kürzeste Entfernung zwischen zwei Punkten auf einer Kugel keine gerade Linie, sondern ein großer Kreis (quasi geodätisch), und die Winkel, die auf der Oberfläche einer Kugel ein Dreieck bilden, betragen in der Summe mehr als 180 Grad.

Aufgrund dieser Unterschiede erfordern geometrische Funktionen auf einer Kugel (oder ihrer Projektion) die Verwendung von Sphärischer Geometrie, um Konstrukte wie Entfernung, Richtung und Bereich zu berechnen. Hilfsprogramme zur Berechnung dieser sphärischen geometrischen Konstrukte sind im Namensraum google.maps.geometry.spherical von Maps API enthalten. Der Namensraum enthält statische Methoden zur Berechnung skalarer Werte aus sphärischen Koordinaten (Breiten- und Längenangaben).

Entfernungs- und Bereichsfunktionen

Die Entfernung zwischen zwei Punkten ist die Länge des kürzesten Wegs, der sie verbindet. Der kürzeste Pfad wird als geodätische Linie bezeichnet. Auf einer Kugel sind alle geodätischen Linien Teile eines großen Kreises. Um diese Entfernung zu berechnen, rufen Sie computeDistanceBetween() auf, und übergeben zwei Objekte LatLng.

Sie können stattdessen auch computeLength() verwenden, um die Länge eines bestimmten Pfads zu berechnen, wenn Sie mehrere Standorte haben.

Entfernungsergebnisse werden in Metern ausgedrückt.

Um einen Bereich eines Polygonalbereichs (in Quadratmetern) zu berechnen, rufen Sie computeArea() auf, und übergeben Sie einen Array von Objekten LatLng, die eine geschlossene Form bilden.

Wenn Sie auf einer Kugel navigieren, ist die Richtung der Winkel einer Bewegungsrichtung ausgehend von einem festen Referenzpunkt, in der Regel dem geografischen Norden. In Google Maps API werden Richtungen in Grad vom geografischen Norden definiert, wobei die Richtung im Uhrzeigersinn vom geografischen Norden (0 Grad) gemessen wird. Sie können diese Richtung zwischen zwei Standorten berechnen, indem Sie die Methode computeHeading() aufrufen und zwei Objekte LatLng from und to übergeben.

Sind eine bestimmte Richtung, ein Ausgangsstandort und die zurückzulegende Entfernung (in Metern) definiert, können Sie die Zielkoordinaten mithilfe von computeOffset() berechnen.

Mithilfe zweier Objekte LatLng und einem Wert zwischen 0 und 1 können Sie außerdem ein Ziel zwischen ihn berechnen; verwenden Sie dazu die Methode interpolate(), mit der eine sphärische lineare Interpolation zwischen den beiden Standorten berechnet wird, wobei der Wert einen Teilwert der zurückzulegenden Strecke auf dem Pfad vom Ursprung zum Ziel angibt.

Im folgenden Beispiel werden, wenn Sie auf zwei Punkte auf der Karte klicken, zwei Polylinien erstellt – eine geodätische Linie und eine Gerade – die zwei Standorte verbinden; außerdem wird die Richtung für die Fortbewegung zwischen diesen beiden Punkten berechnet:

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}
<div id="map"></div>
<div id="floating-panel">
  Origin: <input type="text" readonly id="origin">
  Destination: <input type="text" readonly id="destination"><br>
  Heading: <input type="text" readonly id="heading"> degrees
</div>
/* 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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}

Beispiel anzeigen (geometry-headings.html).

Codierungsmethoden

Pfade in Google Maps JavaScript API werden häufig als Array von Objekten LatLng definiert. Das Übergeben dieser Arrays ist jedoch häufig platzraubend. Stattdessen können Sie den Polyliniencodierungsalgorithmus von Google verwenden, um einen bestimmten Pfad zu komprimieren, den Sie zu einem späteren Zeitpunkt mithilfe der Decodierung wieder entpacken können.

Die Bibliothek geometry enthält einen Namensraum zur Codierung (encoding) für Hilfsprogramme, um Polylinien zu codieren und decodieren.

Mit der statischen Methode encodePath() wird ein bestimmter Pfad codiert. Sie können entweder einen Array von Objekten LatLng oder einen MVCArray (der durch Polyline.getPath() zurückgegeben wird) übergeben.

Um einen codierten Pfad zu decodieren, rufen Sie einfach decodePath() auf und übergeben die codierte Zeichenfolge an die Methode.

Im nachfolgenden Beispiel ist eine Karte von Oxford, Mississippi dargestellt: Per Mausklick auf die Karte wird ein Punkt zu einer Polylinie hinzugefügt. Bei der Konstruktion der Polylinie erfolgt ihre Codierung darunter.

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}
<div id="map"></div>
<div id="right-panel">
  <div>Encoding:</div>
  <textarea id="encoded-polyline"></textarea>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 50%;
  float: left;
}
#right-panel {
  width: 46%;
  float: left;
}
#encoded-polyline {
  height: 100px;
  width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}

Beispiel anzeigen (geometry-encodings.html).

Polygon- und Polylinienfunktionen

Der Namensraum poly der Geometry-Library enthält Hilfsprogrammfunktionen, mit denen bestimmt wird, ob ein bestimmter Punkt innerhalb oder nahe eines Polygons oder einer Polylinie liegt.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Um zu ermitteln, ob ein bestimmter Punkt innerhalb eines Polygons liegt, übergeben Sie den Punkt und das Polygon an google.maps.geometry.poly.containsLocation(). Die Funktion gibt den Wert „true“ zurück, wenn der Punkt innerhalb des Polygons oder auf seinem Rand liegt.

Mit dem folgenden Code wird „true“ an die Browserkonsole zurückgegeben wenn der Benutzer auf einem Bereich innerhalb eines definierten Dreiecks klickt; anderenfalls wird „false“ zurückgegeben.

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Bei einer weiteren Version dieses Codes wird ein roter Kreis auf der Karte gezeichnet, wenn der Klick innerhalb des Bermudadreiecks ausgeführt wird; anderenfalls wird ein grüner Kreis gezeichnet.

Beispiel anzeigen (poly-containsLocation)

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

Um zu ermitteln, ob ein Punkt innerhalb oder nahe einer Polylinie liegt bzw. innerhalb oder nahe dem Rand eines Polygons, übergeben Sie den Punkt, die Polylinie/das Polygon und optional einen Toleranzwert in Grad an google.maps.geometry.poly.isLocationOnEdge(). Die Funktion gibt den Wert „true“ zurück, wenn die Entfernung zwischen dem Punkt und dem nächstgelegenen Punkt der Linie oder des Rands innerhalb der angegebenen Toleranz liegt. Der Standardwert für die Toleranz beträgt 10-9 Grad.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API