PHP implementiert die standortbasierte Bestellung

PHP implementiert die standortbezogene Essensbestellung

Im heutigen bequemen Leben ist die Essensbestellung zu einem leicht verfügbaren Service geworden. Gerade durch die Existenz dieses Dienstes können wir eine Vielzahl köstlicher Speisen genießen, ohne auszugehen. Obwohl es so praktisch ist, birgt die Bestellung von Speisen auch einige Probleme, wie z. B. unklare Lage des Restaurants, ungenaue Positionierung usw. Heute stellen wir vor, wie Sie mit PHP eine standortbasierte Bestellung implementieren.

Schritt 1: Adresse des Benutzers abrufen

Um eine standortbasierte Bestellung zu erreichen, müssen wir zunächst die Adressinformationen des Benutzers abrufen. Dazu können wir den Standortdienst von JavaScript verwenden. Zuerst müssen wir den folgenden Code hinzufügen HTML-Seite zur Referenzierung der Google Maps-API und der JavaScript-Standortdienste.

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;sensor=true&amp;libraries=places"></script>

Als nächstes schreiben Sie den folgenden Code in JavaScript, um den Standort des Benutzers mithilfe der Geolocation-API von HTML5 zu ermitteln.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else { 
  alert("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        var address = results[0].formatted_address;
        document.getElementById("userAddress").value = address;
      }
    }
  });
}

Im obigen Code verwenden wir die Funktion geocoder.geocode, um den erhaltenen Längen- und Breitengrad des Benutzers in besser lesbare Adressinformationen umzuwandeln und sie im HTML-Eingabefeld mit der ID „usetAddress“ festzulegen. Durch die Ausführung des oben genannten Codes können wir die Adressinformationen des Benutzers abrufen und nachfolgende Essensbestellungsdienste anbieten.

Schritt 2: Standortbasierte Bestellseite implementieren

Um die standortbasierte Bestellung zu implementieren, müssen wir zunächst eine Bestellseite entwickeln. Diese Seite ist für die Anzeige der Adresse des Benutzers, der Restaurantliste und verschiedener Filterbedingungen verantwortlich. In einer HTML-Seite können wir den folgenden Code verwenden, um ein einfaches Seitenlayout zu implementieren.

<div>
  <label>Address:</label>
  <input type="text" id="userAddress" readonly>
</div>
<div>
  <label>Restaurant Name:</label>
  <input type="text" id="restaurantName">
</div>
<div>
  <label>Category:</label>
  <select id="category">
    <option value="">All</option>
    <option value="Chinese">Chinese</option>
    <option value="Japanese">Japanese</option>
    <option value="Italian">Italian</option>
  </select>
</div>
<div>
  <button onclick="searchRestaurants()">Search</button>
</div>
<div id="restaurants"></div>

Im obigen Layout haben wir die Grundstruktur der Bestellseite durch Elemente wie Eingabefelder und Abfragebuttons umgesetzt. Darunter wird in den folgenden Schritten die Funktion „searchRestaurants()“ definiert.

Schritt 3: Restaurantinformationen abrufen

Um Restaurantinformationen zu erhalten, müssen wir die Standortinformationen des Restaurants sowie den Restaurantnamen und die Kategorie verwenden, die wir im zweiten Schritt definiert haben. Ebenso können wir Google Maps API und JavaScript-Standortdienste verwenden, um die Standortinformationen des Restaurants zu erhalten.

function searchRestaurants() {
  var restaurantName = document.getElementById("restaurantName").value;
  var category = document.getElementById("category").value;
  var userAddress = document.getElementById("userAddress").value;
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'address': userAddress}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var userLocation = results[0].geometry.location;
      var request = {
        location: userLocation,
        radius: 5000,
        keyword: restaurantName,
        type: category
      };
      var service = new google.maps.places.PlacesService(document.createElement('DIV'));
      service.nearbySearch(request, function(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          showRestaurants(results);
        }
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

Wie im obigen Code gezeigt, verwenden wir die NearbySearch-Funktion des Google Maps Places-Dienstes, um Restaurantinformationen zu erhalten, die den Abfragebedingungen entsprechen. Über die showRestaurants-Funktion können wir diese Informationen anzeigen.

Schritt 4: Restaurantinformationen anzeigen

Nachdem wir die Restaurantinformationen erhalten haben, müssen wir diese Informationen zur HTML-Seite hinzufügen, damit Benutzer sie auswählen können. Um dieses Ziel zu erreichen, können wir den folgenden Code verwenden:

function showRestaurants(restaurants) {
  var html = "";
  for (var i = 0; i < restaurants.length; i++) {
    html += "<div>";
    html += "<h4>" + restaurants[i].name + "</h4>";
    html += "<p>" + restaurants[i].vicinity + "</p>";
    html += "</div>";
  }
  document.getElementById("restaurants").innerHTML = html;
}

Der obige Code erstellt eine Restaurantliste und zeigt die Restaurantnamen und Standortinformationen, die die Abfragebedingungen erfüllen, auf der HTML-Seite an.

Schritt 5: Bestellservice implementieren

Der letzte Schritt besteht darin, den Benutzern einen Bestellservice bereitzustellen, nachdem sie ein Restaurant ausgewählt haben. Um dieses Ziel zu erreichen, können wir den folgenden Code verwenden:

function orderFood() {
  //实现订餐服务
}

In der obigen Codeimplementierung können wir den Bestelldienst implementieren, indem wir die Schnittstelle aufrufen oder zu einer anderen Seite springen.

Zusammenfassung

Durch die oben genannten Schritte haben wir erfolgreich einen standortbasierten Bestellservice implementiert. Benutzer können problemlos nach Restaurants in der Nähe suchen und ihr Lieblingsessen auswählen. Darüber hinaus können wir Back-End-Sprachen und APIs kombinieren, um umfassendere Lebensmittelbestelldienste wie Online-Zahlung, Bestellverwaltung und andere Funktionen zu erreichen. Ich hoffe, dass dieser Artikel für jeden hilfreich sein kann, der PHP lernt.

Das obige ist der detaillierte Inhalt vonPHP implementiert die standortbasierte Bestellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!