Bouw je Startup met PHP Geolocation en Google Places / Code

LocateAsset preloads de Google Maps API, de Geopositie bibliotheek en onze aangepaste Locate.js-code die hieronder wordt weergegeven:

In principe wordt geolocatie gestart wanneer de gebruiker triggert beginSearch. De Geoposition-code roept de succesfunctie aan wanneer deze terugkeert naar de locatie van de gebruiker. We passen de succesfunctie aan om een kaart op de locatie weer te geven en om onze verborgen formuliervelden te vullen met de geretourneerde breedtegraad en lengtegraad. Wanneer de gebruiker het formulier heeft geplaatst, zijn de locatiecoördinaten beschikbaar voor onze web-app.

Hier is de code in Succes() die de formuliervelden aanvult met de locatiecoördinaten:

De rest van _formGeolocate.php is gesplitst in twee gelijke helften. Aan de linkerkant bieden we de formuliervelden voor de gebruiker om in te voeren met de geolocatiegegevens en de verborgen velden die we nodig hebben om JavaScript te ondersteunen. Aan de rechterkant laten we ruimte voor een knop om Geolocation te activeren en voor het weergeven van de kaart. De succes() functie vult de

tag met de kaart.

   field ($ model, 'name') -> textInput (['maxlength' => 255])?> field ($ model, 'website') -> textInput (['maxlength' => 255])?> field ($ model, 'place_type') -> dropDownList ($ model-> getPlaceTypeOptions (), ['prompt' => 'Welk type plaats is dit?']) -> label ('Type of Place')?> field ($ model, 'notes') -> textArea ()?>    isNewRecord? 'Maken': 'Update', ['class' => $ model-> isNewRecord? 'btn btn-success': 'btn btn-primary'])?> 
 
   
  'btn btn-success', 'onclick' => "javascript: beginSearch (); return false;"])?> 
   
  Zoeken naar je huidige locatie ...

Dit is hoe het formulier er in eerste instantie uitziet:

Klik op de Opzoeklocatie knop om geolocatie te initiëren. Nogmaals, zoek naar een toestemmingsverzoek in de navigatiebalk van de browser.

Zodra uw locatie is gevonden, laten we uw locatie zien op een kaart:

Opmerking: ik heb de vertraging voor Geolocation ingesteld op vijf seconden, maar soms moet je de pagina opnieuw laden om de juiste reactie te krijgen nadat je toestemming hebt gegeven. Bepaalde wifi-locaties zijn minder bepalend dan andere.

Laten we de indelingscode van de vergaderingcontroller bekijken:

 public function actionCreate_geo () $ model = nieuwe plaats (); 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 (); // voeg GPS-invoer toe in PlaceGeometry $ model-> addGeometryByPoint ($ model, $ form ['Place'] ['lat'], $ form ['Place'] ['lng']); return $ this-> redirect (['view', 'id' => $ model-> id]);

Voor nu plaatsen we gewoon een tijdelijke aanduiding voor de gebruiker created_by en laten we de foutafhandeling voor later achter (sorry puristen, dat is niet de focus van deze tutorial op dit moment).

Wanneer de formulierberichten en een plaats worden gemaakt, nemen we het geolocatiepunt van het formulier (die verborgen velden gevuld met het script Locate.js) en voegen we een rij toe aan de gerelateerde plaatsentabel. PlaceGPS.

Zoals ik in deel twee heb genoemd, scheiden we de geolocatiegegevens in een andere tabel omdat de MySQL InnoDB-engine geen ruimtelijke indexen ondersteunt. Dit zal ook de prestaties van zoekopdrachten verbeteren om de dichtstbijzijnde ontmoetingsplaatsen tussen twee gebruikers te vinden.

Hier is de addGeometryByPoint methode in het Place.php-model:

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

Dit is hoe de Place Index-pagina eruit moet zien nadat de record is opgeslagen:

Als u een andere implementatie van HTML5 Geolocation voor Yii 1.x wilt zien, ga dan naar Hoe u Zillow Neighborhood Maps en HTML5 Geolocation gebruikt.

Plaatsen weergeven op Google Maps

Als u op het opdrachtpictogram voor de weergave klikt dat is gekoppeld aan onze nieuwe plaats in de indexweergave hierboven, ziet u dit:

We hebben de Gii-gegenereerde weergavepagina aangepast en code toegevoegd om de Google Map te tekenen met behulp van de Yii2 Google Maps-extensie.

Hier is de Uitzicht actie in PlaceController.php:

 / ** * Geeft een enkel plaatsmodel weer. * @param integer $ id * @return mixed * / public function actionView ($ id) $ model = $ this-> findModel ($ id); $ gps = $ model-> getLocation ($ id); return $ this-> render ('view', ['model' => $ model, 'gps' => $ gps,]);

Hier is de getLocation methode in het Place.php-model. Het haalt de locatiecoördinaten uit de PlaceGPS tafel:

openbare functie getLocation ($ place_id) $ sql = 'Selecteer AsText (gps) als gps van % place_gps waar place_id ='. $ place_id; $ model = PlaceGPS :: findBySql ($ sql) -> one (); $ gps = nieuw \ stdClass; if (is_null ($ model)) return false;  else list ($ gps-> lat, $ gps-> lng) = $ this-> string_to_lat_lon ($ model-> gps);  retourneer $ gps;

Hier is een gedeelte van het weergavebestand dat de pagina weergeeft. De linkerkant bestaat uit een standaard Yii2 detailoverzicht widget voor nu. De rechterkant genereert de code die de kaart trekt:

   $ model, 'attributen' => ['naam', 'place_type', 'website', 'full_address',],])?> 
 
    $ gps-> lat, 'lng' => $ gps-> lng]); $ map = new Map (['center' => $ coord, 'zoom' => 14, 'width' => 300, 'height' => 300,]); $ marker = new Marker (['position' => $ coord, 'title' => $ model-> name,]); // Markering aan de kaart toevoegen $ map-> addOverlay ($ marker); echo $ map-> display ();  else echo 'Er kunnen geen locatiecoördinaten voor deze plaats worden gevonden.'; ?>

Toevoegen via de Google Places API

De automatisch aanvullen van Google Places is een ongelooflijk snelle en eenvoudige manier voor gebruikers om ontmoetingsplaatsen toe te voegen. Ik gebruik de Yii2 Google Places-extensie van 2amigOS.

In PlaceController.php voegen we een actie toe voor Create_place_google:

/ ** * Maakt een nieuw plaatsmodel van Google Place * Als de creatie succesvol is, wordt de browser omgeleid naar de 'weergave'-pagina. * @return mixed * / public function actionCreate_place_google () $ model = nieuwe plaats (); if ($ model-> load (Yii :: $ app-> request-> post ())) ... wordt hieronder verder uitgelegd ... else return $ this-> render ('create_place_google', ['model' = > $ model,]);

De /frontend/views/place/create_place_google.php bestand toont het formulier en initialiseert het JavaScript dat nodig is om automatisch aanvullen te ondersteunen:

 titel)?>
 render ('_ formPlaceGoogle', ['model' => $ model,])?> 
  'places', 'sensor' => 'false',)); echo $ this-> registerJsFile ($ gpJsLink); $ options = '"types": ["establishment"], "componentRestrictions": "country": "us"'; echo $ this-> registerJs ("(function () var input = document.getElementById ('place-searchbox'); var options = $ options; searchbox = new google.maps.places.Autocomplete (input, opties); setupListeners ();) (); ", \ yii \ web \ View :: POS_END); // 'setupBounds ('. $ bound_bl. ','. $ bound_tr. '); ?>

Ontwikkelaar Petra Barus heeft een Google Places-extensie verstrekt voor Yii1.x. Voor deze zelfstudie heb ik de basisondersteuning voor Yii2 gecodeerd. Barus was echter zo vriendelijk om een paar dagen later een Yii2-extensie uit te brengen. Ik heb zijn code nog niet geïntegreerd. Dit is zijn nieuwste Yii2 Google Places Autocomplete-extensie.

Hier is de MapAsset bundel die ik aan het maken ben voor het bijbehorende JavaScript dat nodig is:

Hier is de _formPlaceGoogle.php formuliercode:
   Voer een plaats of bedrijf in dat bekend is bij Google Places:
  field ($ model, 'searchbox') -> textInput (['maxlength' => 255]) -> label ('Plaats')?>       field ($ model, 'place_type') -> dropDownList ($ model-> getPlaceTypeOptions (), ['prompt' => 'Welk type plaats is dit?']) -> label ('Type of Place')?>  isNewRecord? 'Maken': 'Update', ['class' => $ model-> isNewRecord? 'btn btn-success': 'btn btn-primary'])?> 
  
 
    
 
 
  
Er is een zoekbox veld dat de automatische invoer van de gebruiker accepteert. Er zijn ook een aantal verborgen velden die door onze JavaScript worden geladen met de resultaten van de Google Places-service.
Hier is create_place.js die alle "magie" volbrengt:
functie setupListeners () // google.maps.event.addDomListener (venster, 'laden', initialiseren); // zoekvak is de var voor het google places-object dat is gemaakt op de pagina google.maps.event.addListener (searchbox, 'place_changed', function () var place = searchbox.getPlace (); if (! place.geometry)  // Informeer de gebruiker dat een plaats niet is gevonden en retourneer. Return; else // migreert JSON-gegevens van Google naar verborgen formuliervelden populateResult (plaats););  functie populateResult (plaats) // verplaatst JSON-gegevens van Google naar verborgen formuliervelden // zodat Yii2 de gegevens $ ('# place-location') kan plaatsen. val (JSON.stringify (plaats ['geometry'] [ 'plaats'])); $ ( '# Place-google_place_id') val (plaats [ 'place_id']).; $ ( '# Place-full_address') val (plaats [ 'formatted_address']).; . $ ( '# Place-website') val (plaats [ 'website']); $ ( '# Place-omgeving') val (plaats [ 'omgeving']).; $ ( '# Plaats') val (plaats [ 'naam']).; loadMap (plaats [ 'geometrie] [locatie] plaats [ 'naam']);  function loadMap (gps, naam) var mapcanvas = document.createElement ('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '300px'; mapcanvas.style.width = '300px'; mapcanvas.style.border = '1px effen zwart'; document.querySelector ( 'artikel') 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); 
De setupListeners () methode verbindt onze zoekbox naar de service voor automatisch aanvullen van Google Places. Wanneer een place_changed gebeurtenis treedt op, populateResult () wordt aangeroepen om de verborgen velden op het formulier te vullen met gegevens van Google en de kaart te laden die wordt weergegeven in de rechterhelft van het formulier.
U kunt de browserfoutopsporing gebruiken om de verborgen velden te inspecteren nadat deze zijn ingevuld met formuliergegevens via JavaScript. Deze gegevens worden met het formulier bij indiening gepost zodat we ze kunnen toevoegen aan de plaatsdatabase.
Dit is het resterende element van de PlaceController Create_place_google Bewaar actie:
 public function actionCreate_place_google () $ model = nieuwe plaats (); 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 (); // voeg GPS-invoer toe in PlaceGeometry $ model-> addGeometry ($ model, $ form ['Place'] ['location']); return $ this-> redirect (['view', 'id' => $ model-> id]); 
Het lijkt vrij veel op de Create_geo actie. We hebben een afzonderlijke methode met het Place.php-model om de verzameling van locatiegegevens te vereenvoudigen. hier is addGeometry ():
openbare functie addGeometry ($ model, $ location) $ x = json_decode ($ location, true); reset ($ x); $ lat = current ($ x); $ lon = volgende ($ x); $ pg = nieuwe PlaceGPS; $ PG-> place_id = $ model-> id; $ pg-> gps = new \ yii \ db \ Expression ("GeomFromText ('Point (". $ lat. "". $ lon. ")')"); $ PG-> save (); 
Geografische grensfilters instellen voor automatisch aanvullen zoeken
Met de Places Autocomplete-service kunt u ook een geografische grensrechthoek instellen om uw zoekopdracht binnenin te filteren. Wanneer de gebruiker begint te typen, gebruikt de autocomplete alleen plaatsen binnen tien mijl van de plaatsen. Omdat we de huidige locatie van de gebruiker niet hebben ingesteld als een sessievariabele, implementeer ik op dit moment de begrenzende rechthoek niet. Maar we kunnen dit later doen. Hier is een voorbeeld van setupBounds ():
functie setupBounds (pt1, pt2, pt3, pt4) defaultBounds = nieuwe google.maps.LatLngBounds (nieuwe google.maps.LatLng (pt1, pt2), nieuwe google.maps.LatLng (pt3, pt4)); searchbox.setBounds (defaultBounds); 



		
			
	   
	




Code

Bouw je Startup met PHP Geolocation en Google Places

De functionaliteit van plaatsen bouwen

Uitbreiding van het plaatsenschema

De CRUD-code bijwerken

Drie verschillende manieren om plaatsen toe te voegen

Plaatsen aan de navigatiebalk toevoegen

De Place Index-weergave

Plaatsen toevoegen met HTML5 Geolocation

De actie plaatscontroller voor geolocatie toevoegen

titel)?>

Plaatsen weergeven op Google Maps

Toevoegen via de Google Places API

titel)?>

Geografische grensfilters instellen voor automatisch aanvullen zoeken