React-Geolocation und Parse: GeoPoint-Anfragen implementieren

verwendung der react geolokalisierung zur durchführung von geoabfragen mit parse einführung in diesem leitfaden führen sie geoabfragen in parse mithilfe der react geolokalisierung durch sie werden eine react komponente implementieren, die diese abfragen verwendet, und lernen, wie sie realistische daten mit back4app und react einrichten und abfragen voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react app, die erstellt und mit back4app verbunden wenn sie das beispielprojekt dieses leitfadens ausführen möchten, sollten sie die ant design ant design bibliothek ziel führen sie geoabfragen mit geopoints durch, die auf back4app gespeichert sind, und verwenden sie die react geolokalisierung 1 verständnis der parse query klasse jede parse abfrageoperation verwendet den parse query parse query objekttyp, der ihnen hilft, spezifische daten aus ihrer datenbank in ihrer app abzurufen es ist entscheidend zu wissen, dass eine parse query parse query nur nach dem aufruf einer abrufmethode (wie parse query find parse query find oder parse query get parse query get ) aufgelöst wird, sodass eine abfrage eingerichtet und mehrere modifikatoren verkettet werden können, bevor sie tatsächlich aufgerufen wird um eine neue parse query parse query , müssen sie als parameter die gewünschte parse object parse object unterklasse übergeben, die die ergebnisse ihrer abfrage enthalten wird ein beispiel für eine abfrage ist unten zu sehen, in der eine fiktive profile profile unterklasse abgefragt wird 1 // this will create your query 2 let parsequery = new parse query("profile"); 3 // the query will resolve only after calling this method 4 let queryresult = await parsequery find(); sie können mehr über die parse query parse query klasse hier in der offiziellen dokumentation https //parseplatform org/parse sdk js/api/master/parse query html 2 speichern sie einige daten auf back4app lassen sie uns eine city city klasse erstellen, die das ziel unserer abfragen in diesem leitfaden sein wird in der parse js konsole ist es möglich, javascript code direkt auszuführen, um die inhalte ihrer anwendungsdatenbank mit den js sdk befehlen abzufragen und zu aktualisieren führen sie den folgenden code von ihrer js konsole aus und fügen sie die daten in back4app ein hier ist, wie die js konsole in deinem dashboard aussieht lege die stadt stadt klasse mit dem folgenden beispielinhalt an 1 // add city objects and create table 2 // note how geopoints are created, passing latitude and longitude as arguments 3 // montevideo 4 var city = new parse object('city'); 5 city set('name', 'montevideo uruguay'); 6 city set('location', new parse geopoint( 34 85553195363169, 56 207280375137955)); 7 await city save(); 8&#x9; 9 // brasília 10 city = new parse object('city'); 11 city set('name', 'brasília brazil'); 12 city set('location', new parse geopoint( 15 79485821477289, 47 88391074690196)); 13 await city save(); 14&#x9; 15 // bogotá 16 city = new parse object('city'); 17 city set('name', 'bogotá colombia'); 18 city set('location', new parse geopoint(4 69139880891712, 74 06936691331047)); 19 await city save(); 20&#x9; 21 // mexico city 22 city = new parse object('city'); 23 city set('name', 'mexico city mexico'); 24 city set('location', new parse geopoint(19 400977162618933, 99 13311378164776)); 25 await city save(); 26&#x9; 27 // washington, d c 28 city = new parse object('city'); 29 city set('name', 'washington, d c usa'); 30 city set('location', new parse geopoint(38 930727220189944, 77 04626261880388)); 31 await city save(); 32&#x9; 33 // ottawa 34 city = new parse object('city'); 35 city set('name', 'ottawa canada'); 36 city set('location', new parse geopoint(45 41102167733425, 75 695414598736)); 37 await city save(); 38&#x9; 39 console log('success!'); 3 abfrage der daten jetzt, da sie eine befüllte klasse haben, können wir einige geopoint abfragen darin durchführen lassen sie uns beginnen, indem wir stadt stadt ergebnisse nach der nächsten von kingston in jamaika (breitengrad 18 01808695059913 und längengrad 76 79894232253473) sortieren, unter verwendung der parse query near parse query near methode 1 // create your query 2 let parsequery = new parse query('city'); 3&#x9; 4 // create our geopoint for the query 5 let kingstongeopoint = new parse geopoint(18 018086950599134, 76 79894232253473); 6&#x9; 7 // `near` will order results based on distance between the geopoint type field from the class and the geopoint argument 8 parsequery near('location', kingstongeopoint); 9&#x9; 10 // the query will resolve only after calling this method, retrieving 11 // an array of `parse objects` 12 let queryresults = await parsequery find(); 13&#x9; 14 // let's show the results 15 for (let result of queryresults) { 16 // you access `parse objects` attributes by using ` get` 17 console log(result get('name')); 18 }; lassen sie uns jetzt mit der methode parse query withinkilometers parse query withinkilometers , die alle ergebnisse abruft, deren geopoint feld sich innerhalb der maximalen entfernung befindet kingston wird erneut als referenz verwendet und die entfernungsgrenze beträgt 3000 km 1 // create your query 2 let parsequery = new parse query('city'); 3&#x9; 4 // create our geopoint for the query 5 let kingstongeopoint = new parse geopoint(18 018086950599134, 76 79894232253473); 6&#x9; 7 // you can also use `withinmiles` and `withinradians` the same way, 8 // but with different measuring unities 9 parsequery withinkilometers('location', kingstongeopoint, 3000); 10&#x9; 11 // the query will resolve only after calling this method, retrieving 12 // an array of `parse objects` 13 let queryresults = await parsequery find(); 14&#x9; 15 // let's show the results 16 for (let result of queryresults) { 17 // you access `parse objects` attributes by using ` get` 18 console log(result get('name')); 19 }; eine weitere nützliche abfragemethode ist parse query withinpolygon parse query withinpolygon , die ergebnisse abfragt, deren geopoint feldwert innerhalb des angegebenen polygons liegt, das aus einem array von geopoints besteht (mindestens drei) wenn der polygonpfad offen ist, wird er automatisch von parse geschlossen, indem die letzten und ersten punkte verbunden werden für dieses beispiel verwenden sie ein einfaches polygon, das grob den südamerikanischen kontinent umfasst, bestehend aus 5 weit auseinanderliegenden geopoints im ozean 1 // create your query 2 let parsequery = new parse query('city'); 3&#x9; 4 // create our geopoint polygon for the query 5 let geopoint1 = new parse geopoint(15 822238344514378, 72 42845934415942); 6 let geopoint2 = new parse geopoint( 0 7433770196268968, 97 44765968406668); 7 let geopoint3 = new parse geopoint( 59 997149373299166, 76 52969196322749); 8 let geopoint4 = new parse geopoint( 9 488786415007201, 18 346101586021952); 9 let geopoint5 = new parse geopoint(15 414859532811047, 60 00625459569375); 10&#x9; 11 // note that the polygon is merely an array of geopoint objects and that the first and last are not connected, so parse connects them for you 12 parsequery withinpolygon('location', \[geopoint1, geopoint2, geopoint3, geopoint4, geopoint5]); 13&#x9; 14 // the query will resolve only after calling this method, retrieving 15 // an array of `parse objects` 16 let queryresults = await parsequery find(); 17&#x9; 18 // let's show the results 19 for (let result of queryresults) { 20 // you access `parse objects` attributes by using ` get` 21 console log(result get('name')); 22 }; 4 abfrage von einer react komponente lass uns nun unsere beispielabfragen innerhalb einer komponente in react verwenden, mit einer einfachen benutzeroberfläche, die eine liste mit ergebnissen anzeigt und auch 3 schaltflächen zum aufrufen der abfragen hat die komponente ruft auch den aktuellen standort des geräts mit der navigator geolocation navigator geolocation javascript api ab, sodass die abfragen echte daten verwenden, vorausgesetzt, der benutzer hat den standortzugriff im browser nicht deaktiviert so ist der code der komponente aufgebaut, beachten sie die doquery doquery funktionen, die den beispielcode von zuvor enthalten javascript 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider } from 'antd'; 5 import { closeoutlined, searchoutlined } from '@ant design/icons'; 6&#x9; 7 export const querygeo = () => { 8 // state variable 9 const \[queryresults, setqueryresults] = usestate(); 10&#x9; 11 const doquerynear = async function () { 12 // check if geolocation api is available in the browser 13 if ('geolocation' in navigator) { 14 // get current location and create the geopoint for the query 15 navigator geolocation getcurrentposition( 16 async function (position) { 17 const currentposition = { 18 latitude position coords latitude, 19 longitude position coords longitude, 20 }; 21 // create our geopoint 22 let currentlocationgeopoint = new parse geopoint( 23 currentposition latitude, 24 currentposition longitude 25 ); 26&#x9; 27 // create our query 28 let parsequery = new parse query('city'); 29&#x9; 30 // `near` will order results based on distance between the geopoint type field from the class and the geopoint argument 31 parsequery near('location', currentlocationgeopoint); 32&#x9; 33 try { 34 let results = await parsequery find(); 35 // set query results to state variable 36 setqueryresults(results); 37 return true; 38 } catch (error) { 39 // error can be caused by lack of internet connection 40 alert(`error! ${error message}`); 41 } 42 }, 43 function ( error) { 44 alert( 45 'you need to allow geolocation to retrieve your location on the browser to test this if you are on an apple os, enable it on your system preferences ' 46 ); 47 } 48 ); 49 } else { 50 alert('geolocation services are not supported by your browser '); 51 } 52 return false; 53 }; 54&#x9; 55 const doquerywithinkilometers = async function () { 56 // check if geolocation api is available in the browser 57 if ('geolocation' in navigator) { 58 // get current location and create the geopoint for the query 59 navigator geolocation getcurrentposition( 60 async function (position) { 61 const currentposition = { 62 latitude position coords latitude, 63 longitude position coords longitude, 64 }; 65 // create our geopoint 66 let currentlocationgeopoint = new parse geopoint( 67 currentposition latitude, 68 currentposition longitude 69 ); 70&#x9; 71 // create our query 72 let parsequery = new parse query('city'); 73&#x9; 74 // you can also use `withinmiles` and `withinradians` the same way, 75 // but with different measuring unities 76 parsequery withinkilometers( 77 'location', 78 currentlocationgeopoint, 79 3000 80 ); 81&#x9; 82 try { 83 let results = await parsequery find(); 84 // set query results to state variable 85 setqueryresults(results); 86 } catch (error) { 87 // error can be caused by lack of internet connection 88 alert(`error! ${error message}`); 89 } 90 }, 91 function ( error) { 92 alert( 93 'you need to allow geolocation to retrieve your location on the browser to test this if you are on an apple os, enable it on your system preferences ' 94 ); 95 } 96 ); 97 } else { 98 alert('geolocation services are not supported by your browser '); 99 } 100 return false; 101 }; 102&#x9; 103 const doquerywithinpolygon = async function () { 104 // create our geopoint polygon points 105 let geopoint1 = new parse geopoint(15 822238344514378, 72 42845934415942); 106 let geopoint2 = new parse geopoint( 0 7433770196268968, 97 44765968406668); 107 let geopoint3 = new parse geopoint( 59 997149373299166, 76 52969196322749); 108 let geopoint4 = new parse geopoint( 9 488786415007201, 18 346101586021952); 109 let geopoint5 = new parse geopoint(15 414859532811047, 60 00625459569375); 110&#x9; 111 // create our query 112 let parsequery = new parse query('city'); 113&#x9; 114 // note that the polygon is merely an array of geopoint objects and that the first and 115 // last are not connected, so parse connects them for you 116 parsequery withinpolygon('location', \[ 117 geopoint1, 118 geopoint2, 119 geopoint3, 120 geopoint4, 121 geopoint5, 122 ]); 123&#x9; 124 try { 125 let results = await parsequery find(); 126 // set query results to state variable 127 setqueryresults(results); 128 } catch (error) { 129 // error can be caused by lack of internet connection 130 alert(`error! ${error}`); 131 return false; 132 } 133 return true; 134 }; 135&#x9; 136 const clearqueryresults = async function () { 137 setqueryresults(undefined); 138 return true; 139 }; 140&#x9; 141 return ( 142 \<div> 143 \<div classname="header"> 144 \<img 145 classname="header logo" 146 alt="back4app logo" 147 src={ 148 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 149 } 150 /> 151 \<p classname="header text bold">{'react on back4app'}\</p> 152 \<p classname="header text">{'geopoint queries'}\</p> 153 \</div> 154 \<div classname="container"> 155 \<div classname="flex between"> 156 \<h2 classname="heading">{'query list'}\</h2> 157 \<div classname="flex"> 158 \<button 159 onclick={() => doquerynear()} 160 type="primary" 161 classname="heading button" 162 color={'#208aec'} 163 icon={\<searchoutlined />} 164 > 165 query near 166 \</button> 167 \<button 168 onclick={() => doquerywithinkilometers()} 169 type="primary" 170 classname="heading button" 171 color={'#208aec'} 172 icon={\<searchoutlined />} 173 > 174 query within km 175 \</button> 176 \<button 177 onclick={() => doquerywithinpolygon()} 178 type="primary" 179 classname="heading button" 180 color={'#208aec'} 181 icon={\<searchoutlined />} 182 > 183 query within polygon 184 \</button> 185 \<button 186 onclick={() => clearqueryresults()} 187 type="primary" 188 classname="heading button" 189 color={'#208aec'} 190 icon={\<closeoutlined />} 191 > 192 clear results 193 \</button> 194 \</div> 195 \</div> 196 \<divider /> 197 \<div classname="flex between"> 198 \<div classname="flex child"> 199 {/ query list /} 200 {queryresults !== undefined && 201 queryresults map((result, index) => ( 202 \<div classname="list item" key={`${index}`}> 203 \<p classname="list item title">{`${result get('name')}`}\</p> 204 \</div> 205 ))} 206 {queryresults !== undefined && queryresults length <= 0 ? ( 207 \<p>{'no results here!'}\</p> 208 ) null} 209 \</div> 210 \</div> 211 \</div> 212 \</div> 213 ); 214 }; typescript 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider } from 'antd'; 4 import { closeoutlined, searchoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6&#x9; 7 type locationobject = {latitude number, longitude number}; 8&#x9; 9 export const querygeo fc<{}> = () reactelement => { 10 // state variable 11 const \[queryresults, setqueryresults] = usestate\<parse object\[]>(); 12&#x9; 13 const doquerynear = async function () promise\<boolean> { 14 // check if geolocation api is available in the browser 15 if ("geolocation" in navigator) { 16 // get current location and create the geopoint for the query 17 navigator geolocation getcurrentposition(async function (position) { 18 const currentposition locationobject = { latitude position coords latitude, longitude position coords longitude }; 19 // create our geopoint 20 let currentlocationgeopoint parse geopoint = new parse geopoint( 21 currentposition latitude, 22 currentposition longitude, 23 ); 24&#x9; 25 // create our query 26 let parsequery parse query = new parse query('city'); 27&#x9; 28 // `near` will order results based on distance between the geopoint type field from the class and the geopoint argument 29 parsequery near('location', currentlocationgeopoint); 30&#x9; 31 try { 32 let results parse object\[] = await parsequery find(); 33 // set query results to state variable 34 setqueryresults(results); 35 return true; 36 } catch (error) { 37 // error can be caused by lack of internet connection 38 alert(`error! ${error message}`); 39 } 40 }, function ( error any) { 41 alert("you need to allow geolocation to retrieve your location on the browser to test this if you are on an apple os, enable it on your system preferences "); 42 }); 43 } else { 44 alert("geolocation services are not supported by your browser "); 45 } 46 return false; 47 }; 48&#x9; 49 const doquerywithinkilometers = async function () promise\<boolean> { 50 // check if geolocation api is available in the browser 51 if ("geolocation" in navigator) { 52 // get current location and create the geopoint for the query 53 navigator geolocation getcurrentposition(async function (position) { 54 const currentposition locationobject = { latitude position coords latitude, longitude position coords longitude }; 55 // create our geopoint 56 let currentlocationgeopoint parse geopoint = new parse geopoint( 57 currentposition latitude, 58 currentposition longitude, 59 ); 60&#x9; 61 // create our query 62 let parsequery parse query = new parse query('city'); 63&#x9; 64 // you can also use `withinmiles` and `withinradians` the same way, 65 // but with different measuring unities 66 parsequery withinkilometers('location', currentlocationgeopoint, 3000); 67&#x9; 68 try { 69 let results parse object\[] = await parsequery find(); 70 // set query results to state variable 71 setqueryresults(results); 72 } catch (error) { 73 // error can be caused by lack of internet connection 74 alert(`error! ${error message}`); 75 } 76 }, function ( error any) { 77 alert("you need to allow geolocation to retrieve your location on the browser to test this if you are on an apple os, enable it on your system preferences "); 78 }); 79 } else { 80 alert("geolocation services are not supported by your browser "); 81 } 82 return false; 83 }; 84&#x9; 85 const doquerywithinpolygon = async function () promise\<boolean> { 86 // create our geopoint polygon points 87 // in react typescript types ('@types/parse'), parse query withinpolygon expects 88 // an array of number arrays, so you need to change the declarations 89 let geopoint1 number\[] = \[ 90 7 242 845 934 415 940,00 91 15 822 238 344 514 300,00 92 ]; 93 let geopoint2 number\[] = \[ 94 9 744 765 968 406 660,00 95 0 7433770196268968, 96 ]; 97 let geopoint3 number\[] = \[ 98 7 652 969 196 322 740,00 99 59 997 149 373 299 100,00 100 ]; 101 let geopoint4 number\[] = \[ 102 18 346 101 586 021 900,00 103 9 488 786 415 007 200,00 104 ]; 105 let geopoint5 number\[] = \[ 106 6 000 625 459 569 370,00 107 15 414 859 532 811 000,00 108 ]; 109&#x9; 110 // create our query 111 let parsequery parse query = new parse query('city'); 112&#x9; 113 // note that the polygon is merely an array of geopoint objects and that the first and 114 // last are not connected, so parse connects them for you 115 parsequery withinpolygon('location', \[ 116 geopoint1, 117 geopoint2, 118 geopoint3, 119 geopoint4, 120 geopoint5, 121 ]); 122&#x9; 123 try { 124 let results parse object\[] = await parsequery find(); 125 // set query results to state variable 126 setqueryresults(results); 127 } catch (error) { 128 // error can be caused by lack of internet connection 129 alert(`error! ${error}`); 130 return false; 131 } 132 return true; 133 }; 134&#x9; 135 const clearqueryresults = async function () promise\<boolean> { 136 setqueryresults(undefined); 137 return true; 138 }; 139&#x9; 140 return ( 141 \<div> 142 \<div classname="header"> 143 \<img 144 classname="header logo" 145 alt="back4app logo" 146 src={ 147 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 148 } 149 /> 150 \<p classname="header text bold">{'react on back4app'}\</p> 151 \<p classname="header text">{'geopoint queries'}\</p> 152 \</div> 153 \<div classname="container"> 154 \<div classname="flex between"> 155 \<h2 classname="heading">{'query list'}\</h2> 156 \<div classname="flex"> 157 \<button 158 onclick={() => doquerynear()} 159 type="primary" 160 classname="heading button" 161 color={'#208aec'} 162 icon={\<searchoutlined />} 163 > 164 query near 165 \</button> 166 \<button 167 onclick={() => doquerywithinkilometers()} 168 type="primary" 169 classname="heading button" 170 color={'#208aec'} 171 icon={\<searchoutlined />} 172 > 173 query within km 174 \</button> 175 \<button 176 onclick={() => doquerywithinpolygon()} 177 type="primary" 178 classname="heading button" 179 color={'#208aec'} 180 icon={\<searchoutlined />} 181 > 182 query within polygon 183 \</button> 184 \<button 185 onclick={() => clearqueryresults()} 186 type="primary" 187 classname="heading button" 188 color={'#208aec'} 189 icon={\<closeoutlined />} 190 > 191 clear results 192 \</button> 193 \</div> 194 \</div> 195 \<divider /> 196 \<div classname="flex between"> 197 \<div classname="flex child"> 198 {/ query list /} 199 {queryresults !== undefined && 200 queryresults map((result parse object, index number) => ( 201 \<div classname="list item" key={`${index}`}> 202 \<p classname="list item title">{`${result get('name')}`}\</p> 203 \</div> 204 ))} 205 {queryresults !== undefined && 206 queryresults length <= 0 ? ( 207 \<p>{'no results here!'}\</p> 208 ) null} 209 \</div> 210 \</div> 211 \</div> 212 \</div> 213 ); 214 }; fügen sie auch diese klassen zu ihrer app css app css datei hinzu, um das layout der komponente vollständig darzustellen app css 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6&#x9; 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14&#x9; 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 font weight bold; 23 } 24&#x9; 25 p { 26 margin 0; 27 } 28&#x9; 29 body { 30 margin 0; 31 background color #fff; 32 } 33&#x9; 34 container { 35 width 100%; 36 max width 900px; 37 margin auto; 38 padding 20px 0; 39 text align left; 40 } 41&#x9; 42 header { 43 align items center; 44 padding 25px 0; 45 background color #208aec; 46 } 47&#x9; 48 header logo { 49 height 55px; 50 margin bottom 20px; 51 object fit contain; 52 } 53&#x9; 54 header text bold { 55 margin bottom 3px; 56 color rgba(255, 255, 255, 0 9); 57 font size 16px; 58 font weight bold; 59 } 60&#x9; 61 header text { 62 color rgba(255, 255, 255, 0 9); 63 font size 15px; 64 } 65&#x9; 66 heading { 67 font size 22px; 68 } 69&#x9; 70 flex { 71 display flex; 72 } 73&#x9; 74 flex between { 75 display flex; 76 justify content space between; 77 } 78&#x9; 79 flex child { 80 flex 0 0 45%; 81 } 82&#x9; 83 heading button { 84 margin left 12px; 85 } 86&#x9; 87 list item { 88 padding bottom 15px; 89 margin bottom 15px; 90 border bottom 1px solid rgba(0,0,0,0 06); 91 text align left; 92 } 93&#x9; 94 list item title { 95 color rgba(0,0,0,0 87); 96 font size 17px; 97 } so sollte die komponente nach dem rendern und abfragen einer der abfragefunktionen aussehen fazit am ende dieses leitfadens haben sie gelernt, wie geopoint datenabfragen auf parse funktionieren und wie sie diese von einer react anwendung aus auf back4app durchführen im nächsten leitfaden werden sie überprüfen, wie sie benutzer in parse erstellen und verwalten