Construiți-vă pornirea cu PHP Geolocation și Google Places / Cod

LocateAsset preîncărcă API-ul Hărți Google geoPosition biblioteca și codul nostru Locate.js personalizat, care este prezentat mai jos:

Practic, geolocalizarea este inițiată când utilizatorul declanșează beginSearch. Codul Geopozitiv apelează funcția de succes atunci când se întoarce cu locația utilizatorului. Personalizăm funcția de succes pentru a afișa o hartă la locația respectivă și pentru a popula câmpurile de formular ascunse cu latitudinea și longitudinea returnate. Când utilizatorul publică formularul, coordonatele locației vor fi disponibile pentru aplicația Web.

Iată codul înăuntru Succes() care cuprinde câmpurile formularului cu coordonatele locației:

Restul _formGeolocate.php este împărțit în două jumătăți egale. În partea stângă, furnizăm câmpurile de formular pentru utilizatorul care intră cu datele de geolocație și câmpurile ascunse de care avem nevoie pentru a suporta JavaScript. În partea dreaptă, lăsăm spațiu pentru un buton pentru a declanșa Geolocația și pentru afișarea hărții. succes() funcția umple

eticheta cu harta.

   câmp ($ model, 'nume') -> textInput (['maxlength' => 255])?> câmp ($ model, 'site') -> textInput (['maxlength' => 255])?> câmpul ($ model, 'place_type') -> dropDownList ($ model-> getPlaceTypeOptions (), ['prompt' => 'Ce tip de loc este acesta? câmp ($ model, "note") -> textArea ()?>    esteNewRecord? 'Creare': 'Actualizare', ['class' => $ model-> isNewRecord? 'btn btn-succes': 'btn btn-primary'])?> 
 
   
  'btn btn-succes', 'onclick' => "javascript: beginSearch (); return false";))> 
   
  Căutarea locației dvs. curente ...

Iată cum arată formularul inițial:

Faceți clic pe Locația căutării pentru a iniția localizarea geografică. Din nou, căutați o solicitare de permisiuni în bara de navigare a browserului.

După găsirea locației dvs., vă vom arăta locația pe o hartă:

Notă: Am setat întârzierea pentru Geolocație la cinci secunde, dar uneori va trebui să reîncărcați pagina pentru a obține răspunsul corect după ce ați acordat permisiunea. Anumite locații WiFi sunt mai puțin determinate decât altele.

Să aruncăm o privire la formularul de trimitere a formularului de control al conferinței:

 funcția publică funcțiaCreate_geo () $ model = new Place (); dacă ($ model-> încărcați (Yii :: $ app-> request-> post ())) if (Yii :: $ app-> user-> getIsGuest ()) $ model-> created_by = 1;  altceva $ model-> created_by = Yii :: $ app-> user-> getId ();  $ form = Yii :: $ app-> request-> post (); $ Model-> Salvare (); // adăugați intrarea GPS în modelul PlaceGeometry $ model-> addGeometryByPoint ($ model, $ form ['Place'] ['lat'], $ form ['Place'] ['lng']); returnați $ this-> redirect (['view', 'id' => $ model-> id]);

Deocamdată, introducem doar un substituent pentru utilizatorul creat de utilizatori și lăsând o manevrare a erorilor mai târziu (asistăm puristii, care nu se află în prezent în acest tutorial).

Când se creează posturile de formular și un loc, vom lua punctul de geolocație din formular (acele câmpuri ascunse completate de scriptul Locate.js) și vom adăuga un rând în tabelul de locații asociat PlaceGPS.

Așa cum am menționat în partea a doua, separăm datele de geolocație într-un tabel diferit, deoarece motorul InnoDB MySQL nu suportă indexuri spațiale. Acest lucru va îmbunătăți, de asemenea, performanța interogărilor pentru a găsi cele mai apropiate locuri de întâlnire între doi utilizatori.

Iată-l addGeometryByPoint în modelul Place.php:

 funcția publică addGeometryByPoint ($ model, $ lat, $ lon) $ pg = new PlaceGPS; $ Pg-> place_id = $ Model-> id; $ pg-> gps = nou \ yii \ db \ Expresiune ("GeomFromText (" Punctul ("$ lat" "$ lon.") ') "); $ Pg-> Salvare ();

Iată ce ar trebui să arate pagina indexului de loc după înregistrarea înregistrării:

Dacă doriți să vedeți o altă implementare a localizării HTML5 pentru Yii 1.x, consultați Cum se utilizează Hărți de Vecinătate Zillow și Geolocație HTML5.

Afișarea locațiilor pe Hărți Google

Dacă faceți clic pe pictograma de comandă de vizualizare asociată cu noul nostru loc în afișarea indexului de mai sus, veți vedea aceasta:

Am personalizat pagina de vizualizare generată de Gii și codul adăugat pentru a desena harta Google utilizând extensia Google Maps Yii2.

Iată-l Vedere acțiune în PlaceController.php:

 / ** * Afișează un singur model de locație. * @ param integer $ id * @return mixt * / public function actionView ($ id) $ model = $ this-> findModel ($ id); $ gps = $ model-> getLocation ($ id); returneaza $ this-> render ('view', ['model' => $ model, 'gps' => $ gps,]);

Iată-l getLocation în modelul Place.php. Efectuează coordonatele locației de la PlaceGPS masa:

funcția publică getLocation ($ place_id) $ sql = 'Selectați AsText (gps) ca gps din % place_gps unde place_id ='. $ place_id; $ model = LocGPS :: findBySql ($ sql) -> unul (); $ gps = nou \ stdClass; dacă (is_null ($ model)) return false;  altceva list ($ gps-> lat, $ gps-> lng) = $ this-> string_to_lat_lon ($ model-> gps);  returnați $ gps;

Iată o parte din fișierul de vizualizare care redă pagina. Partea stângă constă dintr-un standard Yii2 Vedere Detaliată widget pentru moment. Partea dreaptă generează codul care desenează harta:

   $ model, 'atribute' => ['name', 'place_type', 'website', 'full_address',],])? 
 
    $ gps-> lat, 'lng' => $ gps-> lng]); $ map = Harta nouă (['center' => $ coord, 'zoom' => 14, 'lățime' => 300, 'înălțime' => 300,]); $ marker = marker nou (['position' => $ coord, 'title' => $ model-> nume,]); // Adaugă marker pe hartă $ map-> addOverlay ($ marker); echo $ map-> display ();  else echo 'Nu pot fi găsite coordonate de locație pentru acest loc.'; ?>

Adăugarea din API-ul Google Locații

Funcția de completare automată Google Places este o modalitate incredibil de rapidă și simplă pentru ca utilizatorii să adauge locuri de întâlnire. Folosesc extensia Yii2 Google Places de 2amigOS.

În PlaceController.php, vom adăuga o acțiune pentru Create_place_google:

/ ** * Creează un nou model de locație din Google Place * Dacă creația are succes, browserul va fi redirecționat către pagina "vizualizare". * @return mixed * / public function actionCreate_place_google () $ model = new Place (); dacă $ model-> încărcați (Yii :: $ app-> request-> post ())) ... va fi explicat mai jos ... else return $ this-> render ('create_place_google', [ > $ model,]);

/frontend/views/place/create_place_google.php fișierul va afișa formularul și va inițializa JavaScript necesar pentru a susține autocompletarea:

 titlu)?>
 render ('_ formPlaceGoogle', ['model' => $ model,])?> 
  'locuri', 'senzor' => 'false',)); echo $ this-> registerJsFile ($ gpJsLink); $ options = '"types": ["establishment"], "componentRestrictions": "country": "us"'; echo $ this-> registerJs ("(functie () var input = document.getElementById ('loc-searchbox'); var opțiuni = $ opțiuni; căutarebox = noi google.maps.places.Autocomplete (input, options); ();) (); ", \ yii \ web \ Vizualizare :: POS_END); // 'configurabounds ('. $ bound_bl. ','. $ bound_tr. '); ?>

Programatorul Petra Barus a oferit o extensie Google Places pentru Yii1.x. Pentru acest tutorial, am codat manual suportul de bază pentru Yii2. Cu toate acestea, Barus a fost suficient de bun pentru a elibera o extensie Yii2 la doar câteva zile după aceea. Încă nu am integrat codul lui. Iată cea mai recentă extensie Yii2 Autocompletare Google Locații.

Iată-l MapAsset pachet pe care îl creez pentru JavaScript asociat care va fi necesar:

Iată-l _formPlaceGoogle.php cod formular:
   Introduceți un loc sau o companie cunoscută în Google Locații:
  câmp ($ model, 'searchbox') -> textInput (['maxlength' => 255]) -> etichetă ('       câmpul ($ model, 'place_type') -> dropDownList ($ model-> getPlaceTypeOptions (), ['prompt' => 'Ce tip de loc este acesta?  esteNewRecord? 'Creare': 'Actualizare', ['class' => $ model-> isNewRecord? 'btn btn-succes': 'btn btn-primary'])?> 
  
 
    
 
 
  
Este un SearchBox câmp care va accepta intrarea de completare automată a utilizatorului. Există, de asemenea, o varietate de câmpuri ascunse pe care JavaScript-ul nostru le va încărca cu rezultatele serviciului Google Locații.
Aici este create_place.js care realizează toate "magia":
funcția setupListeners () // google.maps.event.addDomListener (fereastră, "încărcare", inițializare); // căsuța de căutare este var pentru obiectul locații google creat pe pagina google.maps.event.addListener (caseta de căutare, 'place_changed', function () var place = searchbox.getPlace (); if (! place.geometry) // Informați utilizatorul că un loc nu a fost găsit și returnat. Retur; altfel // migrează datele JSON de pe Google în câmpurile de formă ascunse populateResult (loc););  functie populateResult (loc) // muta JSON recuperarea datelor de la Google la campuri de formular ascunse // asa ca Yii2 poate posta datele $ ('# place-location') val (JSON.stringify (place ['geometry' 'Locație'])); $ ( '# Locul-google_place_id') val (loc [ 'place_id'].); $ ( '# Locul-full_address') val (loc [ 'formatted_address'].); . $ ( '# Locul-site-ul') val (locul [ 'site']); $ ( '# Locul-vecinătate') val (locul [ 'apropierea']).; $ ( '# Locul-name') val (locul [ 'name'].); loadMap (locul [ 'geometrie'] [ 'locația'], locul [ 'name']);  funcția loadMap (gps, nume) var mapcanvas = document.createElement ('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '300px'; mapcanvas.style.width = '300px'; mapcanvas.style.border = '1px solid negru'; document.querySelector ( 'articol') appendChild (mapcanvas).; var latlng = nou google.maps.LatLng (gps ['k'], gps ['D']); var myOptions = zoom: 16, centru: latlng, mapTypeControl: false, navigationControlOptions: stil: google.maps.NavigationControlStyle.SMALL, mapTypeId: google.maps.MapTypeId.ROADMAP; var hartă = nou google.maps.Map (document.getElementById ("mapcanvas"), myOptions); var marker = nou google.maps.Marker (position: latlng, map: map, title: name); 
 setupListeners () metoda link-uri noastre SearchBox câmp la serviciul de completare automată Google Locații. Când un place_changed evenimentul apare, populateResult () este chemat să completeze câmpurile ascunse din formular cu datele de la Google și să încarce harta afișată în jumătatea dreaptă a formularului.
Puteți utiliza programul de depanare a browserului pentru a inspecta câmpurile ascunse după ce acestea au fost completate cu datele formularului prin JavaScript. Aceste date vor fi postate împreună cu formularul la trimitere, astfel încât să le putem adăuga în baza de date Loc.
Iată elementul rămas al PlaceController Create_place_google salvați acțiunea:
 funcția publică funcțiaCreate_place_google () $ model = new Place (); dacă ($ model-> încărcați (Yii :: $ app-> request-> post ())) if (Yii :: $ app-> user-> getIsGuest ()) $ model-> created_by = 1;  altceva $ model-> created_by = Yii :: $ app-> user-> getId ();  $ form = Yii :: $ app-> request-> post (); $ Model-> Salvare (); // adăugați intrarea GPS în modelul PlaceGeometry $ model-> addGeometry ($ model, $ form ['Place'] ['locație']); returnați $ this-> redirect (['view', 'id' => $ model-> id]); 
Este destul de similar cu Create_geo acțiune. Avem o metodă separată Place.php pentru a simplifica colectarea datelor despre locație. Iată addGeometry ():
funcția publică addGeometry ($ model, $ location) $ x = json_decode ($ location, true); reset ($ x); $ lat = curent ($ x); $ lon = următoarea ($ x); $ pg = Locație nouă; $ Pg-> place_id = $ Model-> id; $ pg-> gps = nou \ yii \ db \ Expresiune ("GeomFromText (" Punctul ("$ lat" "$ lon.") ') "); $ Pg-> Salvare (); 
Setarea filtrelor frontale geografice pentru căutare automată completă
Serviciul de completare automată a locațiilor vă permite de asemenea să configurați un dreptunghi delimitare geografică pentru a vă filtra în interiorul căutării. Când utilizatorul începe să scrie, autocompletul va folosi numai locurile în termen de zece kilometri de ele. Deoarece nu am configurat locația curentă a utilizatorului ca variabilă de sesiune, nu pun în aplicare dreptunghiul de delimitare în acest moment. Dar putem face asta mai târziu. Iată un exemplu de setupBounds ():
funcția setupBounds (pt1, pt2, pt3, pt4) defaultBounds = noi google.maps.LatLngBounds (nou google.maps.LatLng (pt1, pt2), nou google.maps.LatLng (pt3, pt4)); searchbox.setBounds (defaultBounds);  
Adăugarea manuală a locațiilor
Al treilea mod în care utilizatorii pot adăuga locuri este prin furnizarea manuală a detaliilor și a adreselor. Când trimit formularul, vom încerca să căutăm adresa și să obținem datele geolocation, dar e în regulă dacă nu găsim acest lucru. Abordarea manuală va permite utilizatorilor să adauge locuri cum ar fi casele lor sau un birou pe care nu le doresc să le asocieze cu datele de cartografiere Google.
Iată cum arată formularul:
Iată ce arată codul de acțiune pentru depunerea PlaceController.php. Folosim clientul Geocoding Maps 2Amigos pentru a cău



		
			
	   
	




Cod

Construiți-vă pornirea cu PHP Geolocation și Google Places

Construirea funcțiilor de locații

Extinde schema de locație

Actualizarea codului CRUD

Trei moduri diferite de a adăuga locații

Adăugarea locațiilor în bara de navigare

Vizualizarea indexului locului

Adăugarea de locații cu localizare geografică HTML5

Adăugarea acțiunii de controler de locație pentru localizarea geografică

titlu)?>

Afișarea locațiilor pe Hărți Google

Adăugarea din API-ul Google Locații

titlu)?>

Setarea filtrelor frontale geografice pentru căutare automată completă

Adăugarea manuală a locațiilor