Construire votre startup avec PHP Géolocalisation et Google Places / Code

LocaliserAsset précharge l'API Google Maps, le géoPosition bibliothèque et notre code personnalisé Locate.js qui est affiché ci-dessous:

Fondamentalement, la géolocalisation est initiée lorsque l'utilisateur déclenche beginSearch. Le code Geoposition appelle la fonction success quand il retourne avec la localisation de l'utilisateur. Nous personnalisons la fonction de réussite pour afficher une carte à l'emplacement et renseigner nos champs de formulaire masqués avec la latitude et la longitude renvoyées. Lorsque l'utilisateur publie le formulaire, les coordonnées de localisation seront disponibles sur notre application Web..

Voici le code dans Succès() qui remplit les champs de formulaire avec les coordonnées d'emplacement:

Le reste de _formGeolocate.php est divisé en deux moitiés égales. Sur le côté gauche, nous fournissons les champs de formulaire que l'utilisateur peut entrer avec les données de géolocalisation et les champs masqués nécessaires à la prise en charge de JavaScript. Sur le côté droit, nous laissons un espace pour qu'un bouton déclenche la géolocalisation et affiche la carte. le Succès() la fonction remplit le

tag avec la carte.

   champ ($ model, 'name') -> textInput (['maxlength' => 255])?> champ ($ model, 'website') -> textInput (['maxlength' => 255])?> field ($ model, 'place_type') -> dropDownList ($ model-> getPlaceTypeOptions (), ['prompt' => 'Quel type de lieu est-ce?']) -> label ('Type de lieu')?>> champ ($ modèle, 'notes') -> textArea ()?>    isNewRecord? 'Create': 'Update', ['class' => $ model-> isNewRecord? 'btn btn-success': 'btn btn-primary'])?> 
 
   
  'btn btn-success', 'onclick' => "javascript: beginSearch (); return false;"])?> 
   
  Recherche de votre position actuelle…

Voici à quoi ressemble le formulaire initialement:

Clique sur le Lieu de recherche bouton pour initier la géolocalisation. Encore une fois, recherchez une demande de permission dans la barre de navigation du navigateur..

Une fois votre position trouvée, nous vous indiquerons votre position sur une carte:

Remarque: j'ai réglé le délai de géolocalisation à cinq secondes, mais vous devrez parfois recharger la page pour obtenir la réponse correcte après avoir accordé l'autorisation. Certains emplacements WiFi sont moins déterminés que d'autres.

Jetons un coup d'œil au code de soumission du formulaire Meeting Controller:

 fonction publique actionCreate_geo () $ model = new Place (); if ($ model-> load (Yii :: $ app-> request-> post ())) if (Yii :: $ app-> user-> getIsGuest ()) $ model-> created_by = 1;  else $ model-> created_by = Yii :: $ app-> user-> getId ();  $ form = Yii :: $ app-> request-> post (); $ model-> save (); // ajoute une entrée GPS dans PlaceGeometry $ model-> addGeometryByPoint ($ model, $ form ['Place'] ['lat'], $ form ['Place'] ['lng']); return $ this-> redirect (['view', 'id' => $ model-> id]);

Pour le moment, nous ne faisons que mettre un espace réservé pour l'utilisateur created_by et laisser la gestion des erreurs pour plus tard (désolés puristes, ce n'est pas le propos de ce tutoriel pour le moment).

Lorsque le formulaire est créé et qu'un lieu est créé, nous prenons le point de géolocalisation du formulaire (ces champs cachés renseignés par le script Locate.js) et ajoutons une ligne à la table des lieux associée. LieuGPS.

Comme je l'ai mentionné dans la deuxième partie, nous séparons les données de géolocalisation dans une table différente car le moteur MySQL InnoDB ne prend pas en charge les index spatiaux. Cela améliorera également les performances des requêtes pour trouver les lieux de réunion les plus proches entre deux utilisateurs..

Ici se trouve le addGeometryByPoint méthode dans le modèle Place.php:

 fonction publique addGeometryByPoint ($ model, $ lat, $ lon) $ pg = new PlaceGPS; $ pg-> place_id = $ model-> id; $ pg-> gps = new \ yii \ db \ Expression ("GeomFromText ('Point (". $ lat. "".. lon. ")')"); $ pg-> save ();

Voici à quoi devrait ressembler la page d'index d'emplacement après l'enregistrement de l'enregistrement:

Si vous souhaitez voir une autre implémentation de la géolocalisation HTML5 pour Yii 1.x, consultez Comment utiliser les cartes de quartier de Zillow et la géolocalisation HTML5..

Affichage de lieux sur Google Maps

Si vous cliquez sur l'icône de commande d'affichage associée à notre nouvel emplacement dans la vue d'index ci-dessus, vous verrez ceci:

Nous avons personnalisé la page d'affichage générée par Gii et ajouté du code pour dessiner Google Map à l'aide de l'extension Yii2 Google Maps..

Ici se trouve le Vue action dans PlaceController.php:

 / ** * Affiche un modèle de lieu unique. * @param entier $ id * @retour mixte * / fonction publique actionView ($ id) $ model = $ this-> findModel ($ id); $ gps = $ model-> getLocation ($ id); return $ this-> render ('view', ['model' => $ model, 'gps' => $ gps,]);

Ici se trouve le getLocation méthode dans le modèle Place.php. Il récupère les coordonnées de localisation de la LieuGPS table:

fonction publique getLocation ($ place_id) $ sql = 'Sélectionnez AsText (gps) en tant que gps à partir de % place_gps où place_id ='. $ place_id; $ model = PlaceGPS :: findBySql ($ sql) -> one (); $ gps = new \ stdClass; if (is_null ($ model)) return false;  else list ($ gps-> lat, $ gps-> lng) = $ this-> string_to_lat_lon ($ model-> gps);  return $ gps;

Voici une partie du fichier view qui rend la page. Le côté gauche consiste en un Yii2 standard Vue détaillée widget pour l'instant. Le côté droit génère le code qui dessine la carte:

   $ modèle, 'attributs' => ['nom', 'type_emplacement', 'site web', 'adresse complète',],])?> 
 
    $ gps-> lat, 'lng' => $ gps-> lng]); $ map = new Map (['center' => $ coord, 'zoom' => 14, 'width' => 300, 'height' => 300,]); $ marker = new Marker (['position' => $ coord, 'title' => $ model-> nom,]); // Ajouter un marqueur à la carte $ map-> addOverlay ($ marker); echo $ map-> display ();  else echo 'Aucune coordonnée de localisation pour cet endroit n'a été trouvée.'; ?>

Ajout à partir de l'API Google Adresses

La fonctionnalité de saisie semi-automatique de Google Adresses est un moyen extrêmement rapide et simple pour les utilisateurs d'ajouter des lieux de réunion. J'utilise l'extension Yii2 Google Places de 2amigOS.

Dans PlaceController.php, nous ajouterons une action pour Create_place_google:

/ ** * Crée un nouveau modèle de lieu à partir de Google Place * Si la création est réussie, le navigateur sera redirigé vers la page "Afficher". * @return mixed * / public function actionCreate_place_google () $ model = new Place (); if ($ model-> load (Yii :: $ app-> request-> post ())) … à expliquer plus en détail ci-dessous… else return $ this-> render ('create_place_google', ['model' = > $ model,]);

le /frontend/views/place/create_place_google.php Le fichier affichera le formulaire et initialisera le JavaScript nécessaire pour prendre en charge la saisie semi-automatique:

 titre)?>
 render ('_ formPlaceGoogle', ['model' => $ model,])?> 
  'lieux', 'sensor' => 'false',)); echo $ this-> registerJsFile ($ gpJsLink); $ options = '"types": ["établissement"], "composantRestrictions": "pays": "us"'; echo $ this-> registerJs ("(function () var input = document.getElementById ('lieu-searchbox'); var options = $ options; searchbox = new google.maps.places.Autocomplete (entrée, options); setupListeners ();) (); ", \ yii \ web \ View :: POS_END); // 'setupBounds ('. $ bound_bl. ','. $ bound_tr. '); ?>

La développeur Petra Barus a fourni une extension Google Places pour Yii1.x. Pour ce tutoriel, j'ai codé à la main le support de base pour Yii2. Cependant, Barus a eu la gentillesse de publier une extension Yii2 quelques jours après. Je n'ai pas encore intégré son code. Voici sa dernière extension Yii2 Google Places Autocomplete.

Ici se trouve le MapAsset bundle que je crée pour le JavaScript associé qui sera nécessaire:

Ici se trouve le _formPlaceGoogle.php code de formulaire:
   Saisissez un lieu ou une entreprise connu de Google Adresses:
  champ ($ model, 'searchbox') -> textInput (['maxlength' => 255]) -> label ('Place')?>       field ($ model, 'place_type') -> dropDownList ($ model-> getPlaceTypeOptions (), ['prompt' => 'Quel type de lieu est-ce?']) -> label ('Type de lieu')?>>  isNewRecord? 'Create': 'Update', ['class' => $ model-> isNewRecord? 'btn btn-success': 'btn btn-primary'])?> 
  
 
    
 
 
  
Il y a un Barre de recherche champ qui acceptera l'entrée d'auto-complétion de l'utilisateur. Il existe également une variété de champs cachés que notre JavaScript chargera avec les résultats du service Google Adresses..
Voici le create_place.js qui accomplit toute la "magie":
function setupListeners () // google.maps.event.addDomListener (fenêtre, 'charger', initialiser); // searchbox est la var de l'objet google places créé sur la page google.maps.event.addListener (searchbox, 'lieu_changed', function () var place = searchbox.getPlace (); if (! place.geometry)  // Informe l'utilisateur qu'un lieu n'a pas été trouvé et renvoie. Return; else // migre les données JSON de Google vers les champs de formulaire masqués populateResult (place););  function populateResult (place) // déplace les données JSON extraites de Google vers des champs de formulaire masqués // afin que Yii2 puisse publier les données $ ('# place-location'). val (JSON.stringify (place ['geometry'] [ 'emplacement'])); $ ('# place-google_place_id'). val (place ['place_id']); $ ('# place-full_address'). val (place ['formatted_address']); $ ('# place-website'). val (place ['site web']); $ ('# lieu-voisinage'). val (lieu ['voisinage']); $ ('# lieu-nom'). val (lieu ['nom']); loadMap (lieu ['géométrie'] ['emplacement'], lieu ['nom']);  function loadMap (gps, name) var mapcanvas = document.createElement ('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '300px'; mapcanvas.style.width = '300px'; mapcanvas.style.border = '1px noir solide'; document.querySelector ('article'). appendChild (mapcanvas); var latlng = new google.maps.LatLng (gps ['k'], gps ['D']); var myOptions = zoom: 16, center: latlng, mapTypeControl: false, navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL, mapTypeId: google.maps.MapTypeId.ROADMAP; var map = new google.maps.Map (document.getElementById ("mapcanvas"), myOptions); var marker = new google.maps.Marker (position: latlng, map: map, title: name); 
le setupListeners () la méthode lie notre Barre de recherche champ au service de saisie semi-automatique de Google Adresses. Lorsqu'un lieu_changé événement se produit, populateResult () est appelé pour remplir les champs cachés du formulaire avec les données de Google et charger la carte qui s'affiche dans la moitié droite du formulaire.
Vous pouvez utiliser le débogueur de navigateur pour inspecter les champs masqués une fois qu’ils ont été renseignés avec des données de formulaire via JavaScript. Ces données seront affichées avec le formulaire lors de la soumission afin que nous puissions les ajouter à la base de données Lieu..
Voici le dernier élément de PlaceController Create_place_google enregistrer l'action:
 fonction publique actionCreate_place_google () $ model = new Place (); if ($ model-> load (Yii :: $ app-> request-> post ())) if (Yii :: $ app-> user-> getIsGuest ()) $ model-> created_by = 1;  else $ model-> created_by = Yii :: $ app-> user-> getId ();  $ form = Yii :: $ app-> request-> post (); $ model-> save (); // ajouter une entrée GPS dans PlaceGeometry $ model-> addGeometry ($ model, $ form ['Place'] ['location']); return $ this-> redirect (['view', 'id' => $ model-> id]); 
C'est assez semblable au Create_geo action. Nous avons une méthode de modèle Place.php distincte pour simplifier la collecte de données de localisation. Voici addGeometry ():
fonction publique addGeometry ($ model, $ location) $ x = json_decode ($ location, true); réinitialiser ($ x); $ lat = actuel ($ x); $ lon = next ($ x); $ pg = new Pla



		
			
	   
	




Code

Construire votre startup avec PHP Géolocalisation et Google Places

Construire la fonctionnalité des lieux

Extension du schéma de lieu

Mise à jour du code CRUD

Trois façons différentes d'ajouter des lieux

Ajouter des lieux à la barre de navigation

La vue d'index de lieu

Ajout de lieux avec la géolocalisation HTML5

Ajout de l'action de contrôleur de lieu pour la géolocalisation

titre)?>

Affichage de lieux sur Google Maps

Ajout à partir de l'API Google Adresses

titre)?>