Erstellen Sie eine Kartenanwendung mit PHP und der Google Maps API

In diesem Artikel stellen wir vor, wie Sie mit PHP und der Google Maps-API eine einfache Kartenanwendung erstellen. Diese Anwendung verwendet die Google Maps-API zum Anzeigen einer Karte und PHP zum dynamischen Laden von Markierungen auf der Karte.

Bevor Sie beginnen, müssen Sie über ein Google-Konto verfügen und einen API-Schlüssel erstellen. Aktivieren Sie in Ihrer Google Cloud-Konsole die Maps JavaScript API und die Geocoding API.

1. Konfigurieren Sie die Google Maps-API.

Nachdem Sie den API-Schlüssel von der Google Cloud-Konsole erhalten haben, betten Sie ihn in Ihre HTML-Datei ein:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. Erstellen Sie die Karte.

Um die Karte in Ihrer Anwendung zu verwenden, ist ein HTML-Element erforderlich erstellt und dann an die Google Maps API übergeben werden. Um beispielsweise eine Karte in einem Element mit der ID „map“ zu erstellen:

<div id="map"></div>

Dann initialisieren Sie die Karte mit JavaScript-Code:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });
}

Dadurch wird eine Karte mit einer Höhe von 0 erstellt, da wir kein hinzugefügt haben Kartenmarkierung noch nicht.

3. Kartenmarkierungen hinzufügen

Um der Karte Markierungen hinzuzufügen, müssen Sie für jede Markierung den Längen- und Breitengrad angeben und diese an die Google Maps-API übergeben. Zum Beispiel:

// 经度、纬度
const locations = [
  { lat: 37.7749, lng: -122.4194 },
  { lat: 37.7749, lng: -122.4294 },
  { lat: 37.7849, lng: -122.4194 },
  { lat: 37.7849, lng: -122.4294 }
];

// 创建标记并添加到地图上
locations.forEach(location => {
  new google.maps.Marker({
    position: location,
    map: map
  });
});

Dadurch werden der Karte vier Markierungen hinzugefügt.

4. Dynamisches Laden von Tags

Wenn Sie Tags basierend auf bestimmten Bedingungen dynamisch aus einer Datenbank oder API laden möchten, können Sie PHP verwenden. Schreiben Sie zunächst ein PHP-Skript, das die Daten abfragt und ein JSON-Array zurückgibt, das den Längen- und Breitengrad jeder Markierung enthält:

<?php
// 连接到数据库或API
$data = [
  ['lat' => 37.7749, 'lng' => -122.4194],
  ['lat' => 37.7749, 'lng' => -122.4294],
  ['lat' => 37.7849, 'lng' => -122.4194],
  ['lat' => 37.7849, 'lng' => -122.4294]
];

header('Content-Type: application/json');
echo json_encode($data);
?>

Verwenden Sie dann jQuery in JavaScript, um dieses Skript abzurufen und seine Daten an die Google Maps-API zu übergeben:

// 获取地图数据
$.get("get_map_data.php", function(data) {
  // 创建标记并添加到地图上
  data.forEach(location => {
    new google.maps.Marker({
      position: location,
      map: map
    });
  });
});

Jetzt wird das Markup jedes Mal dynamisch geladen, wenn die Seite geladen wird.

5. Adressstandort und umgekehrte Geokodierung

Neben dem Hinzufügen von Markierungen bietet die Google Maps-API viele weitere Funktionen. Mithilfe von Adress-Targeting und umgekehrter Geokodierung können Sie den Standort eines bestimmten Standorts auf einer Karte anzeigen oder den Namen eines bestimmten Standorts basierend auf Längen- und Breitengrad zurückgeben.

Verwenden Sie beispielsweise die umgekehrte Geokodierung, um die Adresse des Mittelpunkts der Karte über der Karte anzuzeigen:

let map;
let geocoder;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  geocoder = new google.maps.Geocoder();

  // 将地图中心点的地址显示在地图上方
  geocoder.geocode({ location: map.getCenter() }, function(results, status) {
    if (status === "OK") {
      if (results[0]) {
        $("#location").text(results[0].formatted_address);
      } else {
        $("#location").text("No address found");
      }
    } else {
      $("#location").text("Geocoder failed due to: " + status);
    }
  });
}

Dadurch wird die Adresse des Mittelpunkts der Karte in einem Element mit der ID „Standort“ angezeigt.

6. Zusammenfassung

Durch die Verwendung von PHP und der Google Maps-API haben wir eine einfache Kartenanwendung erstellt, die dynamisch Markierungen auf der Karte laden, Adressen anzeigen und andere von der API bereitgestellte Funktionen nutzen kann. In praktischen Anwendungen können Sie fortschrittlichere Technologien und APIs verwenden, um leistungsfähigere Kartenanwendungen zu erstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Kartenanwendung mit PHP und der Google Maps API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!