PHP implémente la commande basée sur la localisation

PHP met en œuvre la commande de nourriture basée sur la localisation

Dans la vie pratique d'aujourd'hui, commander de la nourriture est devenu un service facilement disponible. C'est précisément grâce à l'existence de ce service que nous pouvons profiter d'une variété de plats délicieux sans sortir. Bien que cela soit très pratique, commander de la nourriture se heurte également à certains problèmes, tels qu'un emplacement peu clair du restaurant, un positionnement inexact, etc. Aujourd'hui, nous allons présenter comment utiliser PHP pour implémenter la commande basée sur la localisation.

Étape 1 : Obtenir l'adresse de l'utilisateur

Pour réaliser une commande basée sur la localisation, nous devons d'abord obtenir les informations sur l'adresse de l'utilisateur. Pour ce faire, nous pouvons utiliser le service de localisation de JavaScript. Tout d'abord, nous devons ajouter le code suivant au fichier. Page HTML pour référencer l'API Google Maps et les services de localisation JavaScript.

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

Ensuite, écrivez le code suivant en JavaScript pour obtenir la localisation de l'utilisateur à l'aide de l'API de géolocalisation de HTML5.

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

Dans le code ci-dessus, nous utilisons la fonction geocoder.geocode pour convertir la longitude et la latitude obtenues de l'utilisateur en informations d'adresse plus lisibles, et les définissons sur la zone de saisie HTML avec l'ID "usetAddress". Grâce à l'exécution du code ci-dessus, nous pouvons obtenir les informations d'adresse de l'utilisateur et fournir des services de commande de repas ultérieurs.

Étape 2 : Implémenter une page de commande basée sur la localisation

Pour mettre en œuvre la commande basée sur la localisation, nous devons d'abord développer une page de commande. Cette page sera chargée d'afficher l'adresse de l'utilisateur, la liste des restaurants et diverses conditions de filtrage. Dans une page HTML, nous pouvons utiliser le code suivant pour implémenter une mise en page simple.

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

Dans la mise en page ci-dessus, nous avons implémenté la structure de base de la page de commande à travers des éléments tels que des zones de saisie et des boutons de requête. Parmi elles, la fonction « searchRestaurants() » sera définie dans les étapes suivantes.

Étape 3 : Obtenir des informations sur le restaurant

Pour obtenir des informations sur le restaurant, nous devons utiliser les informations de localisation du restaurant, ainsi que le nom et la catégorie du restaurant que nous avons définis dans la deuxième étape. De même, nous pouvons utiliser l'API Google Maps et les services de localisation JavaScript pour obtenir les informations de localisation du restaurant.

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

Comme le montre le code ci-dessus, nous utilisons la fonction de recherche à proximité du service Google Maps Places pour obtenir des informations sur les restaurants qui répondent aux conditions de requête. Grâce à la fonction showRestaurants, nous pouvons afficher ces informations.

Étape 4 : Afficher les informations sur le restaurant

Après avoir obtenu les informations sur le restaurant, nous devons ajouter ces informations à la page HTML pour que les utilisateurs puissent choisir. Afin d'atteindre cet objectif, nous pouvons utiliser le code suivant :

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

Le code ci-dessus crée une liste de restaurants et affiche les noms des restaurants et les informations de localisation qui répondent aux conditions de requête dans la page HTML.

Étape 5 : Mettre en œuvre le service de commande

La dernière étape est que nous devons fournir aux utilisateurs un service de commande après avoir sélectionné un restaurant. Pour atteindre cet objectif, nous pouvons utiliser le code suivant :

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

Dans l'implémentation du code ci-dessus, nous pouvons implémenter le service de commande en appelant l'interface ou en passant à une autre page.

Résumé

Grâce aux étapes ci-dessus, nous avons mis en œuvre avec succès un service de commande basé sur la localisation. Les utilisateurs peuvent facilement rechercher des restaurants à proximité et choisir leur plat préféré. De plus, nous pouvons également combiner des langages back-end et des API pour obtenir des services de commande de produits alimentaires plus complets, tels que le paiement en ligne, la gestion des commandes et d'autres fonctions. J'espère que cet article pourra être utile à tous ceux qui apprennent PHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!