การใช้ ParseGeoPoint ในการพัฒนาแอปด้วย Ionic Framework

การใช้จุดภูมิศาสตร์กับเฟรมเวิร์ก ionic บทนำ parse ช่วยให้คุณสามารถเชื่อมโยงพิกัดละติจูดและลองจิจูดในโลกจริงกับวัตถุได้ การเพิ่ม parsegeopoint ไปยัง parseuser , คุณจะสามารถค้นหาผู้ใช้ที่ใกล้เคียงที่สุดกับอีกคนหนึ่งได้ง่าย ๆ แสดงตำแหน่งของผู้ใช้ในแอปของคุณ และยังเก็บข้อมูลตำแหน่งของผู้ใช้ได้อีกด้วย นอกจากนี้ยังมีความเป็นไปได้อื่น ๆ อีกมากมาย คุณยังสามารถเชื่อมโยง parsegeopoint กับ parseobject ตัวอย่างเช่น หากแอปของคุณเชื่อมโยงกับร้านค้าที่มีสาขาทางกายภาพ คุณจะสามารถสร้างหน้าเพื่อแสดงตำแหน่งของร้านค้าเหล่านั้นหรือแสดงให้ผู้ใช้เห็นว่าร้านค้าไหนใกล้เขาที่สุด อีกตัวอย่างของการใช้งานการเชื่อมโยงนี้ หากแอปของคุณเป็นเกมที่คุณสร้าง parseobjects เพื่อแทนตัวละคร การเพิ่ม parsegeopoints ให้กับตัวละครเหล่านี้จะทำให้สามารถแสดงตัวละครตามเส้นทางของผู้เล่นได้ บทเรียนนี้อธิบายวิธีการใช้ฟีเจอร์บางอย่างของ parsegeopoint ผ่าน back4app หลังจากทำตามบทเรียนนี้ คุณจะสามารถทำสิ่งนี้ได้ ข้อกำหนดเบื้องต้น 1 ตั้งค่า google api key ติดตั้ง angular google maps agm นำเข้า sdk โดยการเพิ่มคีย์ที่สร้างขึ้นไปยัง /src/app/app module ts 2 ดึงตำแหน่งของผู้ใช้ ในการดึงตำแหน่งของผู้ใช้ เราจะต้องติดตั้ง ionic geolocation ปลั๊กอิน ตอนนี้ที่เราได้ติดตั้งและนำเข้า geolocation ไปยัง providers ที่ /src/app/app module ts แล้ว มาทำการ implement วิธีการรับตำแหน่งและเก็บผลลัพธ์ไว้ในแอตทริบิวต์ของคลาสกันเถอะ 3 สร้างหน้าเพื่อแสดงแผนที่ ตอนนี้ที่เรามีตำแหน่งของผู้ใช้แล้ว มาสร้างหน้าเพื่อแสดงแผนที่ โดยใช้ \[angular google maps] ที่ได้กล่าวถึงไปแล้ว ก่อนอื่น ให้รัน helper ตอนนี้ให้เราทำให้มันรับ marker ที่ถือ ตำแหน่ง ปัจจุบันที่แผนที่กำลังแสดงและอาร์เรย์ของ markers ที่จะเป็นจุดพินรอบแผนที่ ให้เราดึง maps html ขึ้นมาและทำให้มันแสดงข้อมูล 4 แสดงตำแหน่งของผู้ใช้ปัจจุบันในแผนที่ ตอนนี้เรามีหน้าเพื่อแสดงตำแหน่งแผนที่ ให้เรากลับไปที่ home ts และ implement วิธีการเพื่อแสดงตำแหน่งของผู้ใช้บนแผนที่ ให้เรานำความง่ายของ parse มาใช้และมองหาคู่ที่ใกล้เคียงที่สุดกับตำแหน่งของผู้ใช้ คุณสามารถเห็นได้ว่ามันง่ายเพียงใด โดยพื้นฐานแล้วสิ่งที่เราต้องทำคือสร้างอ็อบเจ็กต์ query สำหรับคอลเลกชันผู้ใช้และทำให้มันมองหาตำแหน่งทางภูมิศาสตร์ที่ใกล้ที่สุดโดยการเรียกใช้ near() 5 ตั้งค่า back4app เพื่อเชื่อมโยง parsegeopoint กับ parseobjects สมมติว่าแอปตัวอย่างที่คุณกำลังสร้างนั้นเกี่ยวข้องกับกลุ่มร้านค้าที่มีสาขาทางกายภาพ จะน่าสนใจที่จะโชว์สาขาทางกายภาพทั้งหมดของร้านนี้ในแผนที่ เพื่อทำเช่นนั้นให้สร้างคลาส stores บน back4pp dashboard บันทึกร้านค้าที่มีอยู่เป็น parseobjects, ตำแหน่งของพวกเขา และหลังจากนั้นแอปจะสามารถค้นหาสาขาทางกายภาพและแสดงตำแหน่งของพวกเขาบนแผนที่ได้ ขั้นตอนต่อไปนี้จะช่วยคุณในเรื่องนั้น ไปที่ เว็บไซต์ back4app เข้าสู่ระบบ ค้นหาแอปของคุณและเปิด dashboard ของมัน ไปที่ core > browser > สร้างคลาส ตามที่แสดงในภาพด้านล่าง ในช่อง what type of class do you need? ให้เลือกตัวเลือก custom ในช่อง what should we call it? ให้พิมพ์ “ stores ” และจากนั้นคลิกที่ปุ่ม create class จากนั้นจะมีคลาสใหม่ชื่อ “ stores ” แสดงขึ้นและคุณควรเพิ่ม 2 คอลัมน์ในนั้น คอลัมน์ที่มีประเภทข้อมูล string ชื่อ name และอีกคอลัมน์หนึ่งที่มีประเภทข้อมูล geopoint ชื่อ location คลาสของคุณควรมีลักษณะดังนี้ ตอนนี้ให้กรอกข้อมูลในคลาสนี้ เพื่อทำเช่นนั้นให้คลิกที่ปุ่ม add a row ในเมนูที่มุมขวาบนหรือกลางหน้า ตามที่แสดงในภาพด้านล่าง จากนั้นให้กรอกแถวด้วยข้อมูลที่จำเป็น ชื่อของร้านค้าและละติจูดและลองจิจูดของมัน หลังจากที่คุณได้ใส่ข้อมูลบางอย่างแล้ว คลาส stores ของคุณควรมีลักษณะเหมือนในภาพด้านล่าง หากคุณต้องการเพิ่มข้อมูลเพิ่มเติม คุณสามารถคลิกที่ปุ่มเพิ่มแถวที่ด้านบน หรือที่ปุ่ม + ด้านล่างแถวข้อมูลสุดท้าย ตอนนี้คุณพร้อมที่จะใช้ข้อมูลตำแหน่งของร้านค้าในแอปของคุณแล้ว 6 แสดงตำแหน่งร้านค้าทั้งหมดบนแผนที่ ตอนนี้ที่เรามีตำแหน่งร้านค้าเก็บไว้แล้ว มาลงรหัสวิธีการเพื่อดึงวัตถุและแสดงผลกันเถอะ ง่ายใช่ไหม? ตอนนี้ มาหาตำแหน่งที่ใกล้ที่สุดกันเถอะ คุณสามารถเห็นได้ว่ามันเหมือนกับการหาผู้ใช้ที่ใกล้ที่สุดเหมือนที่เราได้ทำไปก่อนหน้านี้ 7 เพิ่มปุ่มไปยังหน้าแรก คุณอาจสังเกตว่าเราไม่มีวิธีการเรียกใช้วิธีเหล่านั้น มาลงปุ่มใน home ts แล้วทำให้มันเกิดขึ้นกันเถอะ! 8 ทดสอบแอปของคุณ เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ ค้นหาแอปของคุณและคลิกที่แดชบอร์ด > core > browser > user และสร้างผู้ใช้บางคนที่มีตำแหน่งที่เกี่ยวข้องกับพวกเขาเพื่อให้วิธีการ getclosestuser ทำงาน เรียกใช้แอปของคุณในอุปกรณ์จริงหรือในเบราว์เซอร์เพื่อลงทะเบียนและเข้าสู่ระบบ ลองใช้ทุกฟีเจอร์! เสร็จสิ้น! ในขั้นตอนนี้ คุณสามารถใช้ฟีเจอร์บางอย่างของ parsegeopoint ผ่าน back4app!