คู่มือการติดตั้งใช้งานการลงชื่อสมัครใช้ที่ได้รับการยืนยันฉบับย่อ

ภาพรวม

เว็บ iOS API

แพลตฟอร์ม Google Maps พร้อมให้บริการบนเว็บ (JS, TS), Android และ iOS รวมถึงมี API บริการเว็บสําหรับรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทาง ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มเดียว แต่มีลิงก์เอกสารประกอบสำหรับการใช้งานในแพลตฟอร์มอื่นๆ

สร้างเลย

เครื่องมือสร้างด่วนใน Google Cloud Console ช่วยให้คุณสร้างการเติมข้อความอัตโนมัติของแบบฟอร์มที่อยู่ได้โดยใช้ UI แบบอินเทอร์แอกทีฟที่สร้างโค้ด JavaScript ให้คุณ

ผู้ใช้คุ้นเคยกับการดำเนินชีวิตและการทำงานในโลกดิจิทัลแล้ว ซึ่งความสะดวก ความเร็ว และความปลอดภัยคือความคาดหวังพื้นฐาน เมื่อสมัครขอสิ่งต่างๆ เช่น บัตรเครดิต บัญชีธนาคาร หรือสินเชื่อ ลูกค้าคาดหวังว่ากระบวนการจะรวดเร็วและง่ายดาย

ยิ่งผู้ใช้ต้องพิมพ์หรือป้อนข้อมูลที่ซ้ำกันมากเท่าใด คุณก็ยิ่งมีโอกาสน้อยลงที่จะรักษาผู้ใช้เหล่านั้นไว้เป็นลูกค้า การสร้างประสบการณ์การลงชื่อสมัครใช้ที่รวดเร็ว ง่ายดาย และได้รับการยืนยันจะช่วยปรับปรุงประสบการณ์ของผู้ใช้ไปพร้อมกับช่วยให้คุณรักษาผู้ใช้ให้อยู่ในเว็บไซต์ได้

ที่อยู่ซึ่งป้อนด้วยตนเองอาจทําให้ Conversion ลดลง ข้อมูล CRM ไม่ถูกต้อง และเกิดข้อผิดพลาดในการนำส่งซึ่งทําให้เสียค่าใช้จ่าย การลงชื่อสมัครใช้ที่รวดเร็วและยืนยันแล้วช่วยให้การลงชื่อสมัครใช้เร็วขึ้น โดยระบบจะแนะนำที่อยู่ใกล้เคียงโดยทันทีด้วยการแตะเพียงไม่กี่ครั้ง และแสดงที่อยู่ที่คุณป้อนเพื่อให้ยืนยันด้วยภาพ ซึ่งช่วยให้ผู้ใช้มั่นใจว่าได้ป้อนที่อยู่ถูกต้อง การยืนยันที่อยู่ของผู้ใช้โดยใช้ตำแหน่งปัจจุบันยังช่วยป้องกันการประพฤติมิชอบและเพิ่มความเชื่อมั่นของผู้ใช้ต่อผลิตภัณฑ์และบริการของคุณด้วย การยืนยันยังช่วยเพิ่มความมั่นใจในการระบุธนาคารและบัตรเครดิตเสมือนจริงได้ทันที

หัวข้อนี้จะให้คําแนะนําการใช้งานในการสร้างประสบการณ์การลงชื่อสมัครใช้แบบด่วนและยืนยันแล้วด้วย Google Maps Platform เนื่องจากผู้ใช้มีแนวโน้มที่จะลงชื่อสมัครใช้ในอุปกรณ์เคลื่อนที่ ตัวอย่างการใช้งานส่วนใหญ่ในหัวข้อนี้จะมุ่งเน้นที่ Android (ดูแหล่งที่มาของตัวอย่างเพลงทั้งหมดได้ที่นี่) นอกจากนี้ คุณยังใช้ iOS SDK เพื่อทำสิ่งเดียวกันได้อีกด้วย

แผนภาพต่อไปนี้แสดง API หลักที่เกี่ยวข้องกับการสร้างโซลูชัน (คลิกเพื่อขยาย)

กำลังเปิดใช้ API

หากต้องการใช้คําแนะนําเหล่านี้ คุณต้องเปิดใช้ API ต่อไปนี้ในคอนโซล Google Cloud

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่การเริ่มต้นใช้งาน Google Maps Platform

ส่วนแนวทางปฏิบัติแนะนำ

แนวทางปฏิบัติและการปรับเปลี่ยนที่เราจะกล่าวถึงในหัวข้อนี้

  • ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติแนะนำหลัก
  • ไอคอนดาวเป็นการปรับแต่งที่ไม่บังคับแต่แนะนําเพื่อปรับปรุงโซลูชัน
การเพิ่มการเติมข้อความอัตโนมัติในช่องป้อนข้อมูล ป้อนข้อมูลแบบฟอร์มที่อยู่โดยอัตโนมัติ เพิ่มฟังก์ชันการพิมพ์ไปเรื่อยๆ เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์มและเพิ่มความแม่นยำของที่อยู่ด้วยการกดแป้นพิมพ์เพียงไม่กี่ครั้ง
การยืนยันที่อยู่ด้วยภาพ แสดงที่อยู่ของผู้ใช้บนแผนที่เพื่อให้ผู้ใช้เห็นภาพว่าป้อนที่อยู่ถูกต้องแล้ว
การเปรียบเทียบที่อยู่ซึ่งผู้ใช้ป้อนกับตำแหน่งของอุปกรณ์ เปรียบเทียบที่อยู่ซึ่งผู้ใช้เลือกหรือป้อนกับตำแหน่งปัจจุบันของอุปกรณ์เพื่อช่วยระบุว่าผู้ใช้อยู่ที่ที่อยู่ซึ่งระบุ (ผู้ใช้ควรอยู่ที่บ้านเมื่อลงชื่อสมัครใช้เพื่อให้การดำเนินการนี้ได้ผล)
เคล็ดลับในการปรับปรุงการลงชื่อสมัครใช้อย่างรวดเร็วและยืนยันแล้วให้ดียิ่งขึ้น คุณสามารถปรับปรุงการป้อนที่อยู่ให้ดียิ่งขึ้นได้ด้วยการเพิ่มฟีเจอร์ต่างๆ เช่น การปรับแต่งรูปลักษณ์ของวิดเจ็ตการเติมข้อความอัตโนมัติ หรือการให้ผู้ใช้เลือกชื่อธุรกิจหรือจุดสังเกตเป็นที่อยู่

การเพิ่มการเติมข้อความอัตโนมัติในช่องป้อนข้อมูล

ตัวอย่างนี้ใช้ Places SDK สำหรับ Android พร้อมใช้งานในแพลตฟอร์มต่อไปนี้ด้วย iOS | JavaScript

การเติมข้อความอัตโนมัติของสถานที่ช่วยให้ป้อนที่อยู่ในแอปพลิเคชันได้ง่ายขึ้น ซึ่งจะส่งผลให้อัตรา Conversion สูงขึ้นและลูกค้าได้รับประสบการณ์ที่ราบรื่น การเติมข้อความอัตโนมัติจะมีช่องป้อนข้อมูลแบบด่วนช่องเดียวที่มีการคาดคะเนที่อยู่แบบ "พิมพ์ล่วงหน้า" ซึ่งสามารถใช้ป้อนข้อมูลในแบบฟอร์มที่อยู่สําหรับลงชื่อสมัครใช้ได้โดยอัตโนมัติ เมื่อใช้การเติมข้อความอัตโนมัติของสถานที่ในขั้นตอนการลงชื่อสมัครใช้ คุณจะทำสิ่งต่อไปนี้ได้

  • ลดข้อผิดพลาดในการป้อนที่อยู่
  • ลดจำนวนขั้นตอนในกระบวนการลงชื่อสมัครใช้
  • ลดความซับซ้อนของประสบการณ์การป้อนที่อยู่ในอุปกรณ์เคลื่อนที่หรืออุปกรณ์ที่สวมใส่ได้
  • ลดการกดแป้นพิมพ์และเวลาทั้งหมดที่ลูกค้าต้องใช้ในการลงชื่อสมัครใช้

เมื่อผู้ใช้เลือกช่องป้อนข้อมูลอัตโนมัติและเริ่มพิมพ์ รายการการคาดคะเนที่อยู่จะปรากฏขึ้น

เมื่อผู้ใช้เลือกที่อยู่จากรายการการคาดคะเน คุณสามารถใช้คำตอบเพื่อยืนยันที่อยู่และรับตำแหน่งได้ จากนั้นแอปพลิเคชันจะป้อนข้อมูลในช่องที่ถูกต้องของแบบฟอร์มการป้อนที่อยู่ได้ ดังที่แสดงในรูปภาพต่อไปนี้

วิดีโอ: ปรับปรุงแบบฟอร์มที่อยู่ด้วยฟีเจอร์ป้อนข้อความอัตโนมัติสำหรับสถานที่

แบบฟอร์มที่อยู่

Android

iOS

เว็บ

Google Maps Platform มีวิดเจ็ตการเติมข้อความอัตโนมัติของสถานที่สำหรับแพลตฟอร์มอุปกรณ์เคลื่อนที่และเว็บ วิดเจ็ตที่แสดงในรูปภาพก่อนหน้ามีกล่องโต้ตอบการค้นหาที่มีฟังก์ชันการเติมข้อความอัตโนมัติในตัว ซึ่งคุณยังเพิ่มประสิทธิภาพสําหรับการค้นหาระดับสถานที่ได้ด้วย

ส่วนนี้จะอธิบายวิธีใช้การเติมข้อความอัตโนมัติของสถานที่สําหรับการลงชื่อสมัครใช้อย่างรวดเร็วและยืนยันแล้ว

การเพิ่มวิดเจ็ต Place Autocomplete

ใน Android คุณสามารถเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติได้โดยใช้Intent การเติมข้อความอัตโนมัติซึ่งจะเปิด Place Autocomplete จากช่องป้อนข้อมูลที่อยู่บรรทัดที่ 1 ซึ่งผู้ใช้จะเริ่มป้อนที่อยู่ เมื่อเริ่มพิมพ์ ผู้ใช้จะเลือกที่อยู่จากรายการการคาดคะเนการเติมข้อความอัตโนมัติได้

ก่อนอื่น ให้เตรียมตัวเปิดใช้งานกิจกรรมโดยใช้ ActivityResultLauncher ซึ่งจะรอผลลัพธ์จากกิจกรรมที่เปิดใช้งาน การเรียกกลับผลลัพธ์จะมีออบเจ็กต์สถานที่ซึ่งสอดคล้องกับที่อยู่ที่ผู้ใช้เลือกจากการคาดคะเนการเติมข้อความอัตโนมัติ

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

ถัดไป ให้กําหนดพร็อพเพอร์ตี้ช่อง ตําแหน่ง และประเภทของ Intent การเติมข้อความอัตโนมัติของสถานที่ และสร้าง Intent นั้นด้วย Autocomplete.IntentBuilder สุดท้าย ให้เปิดใช้งาน Intent โดยใช้ ActivityResultLauncher ที่กําหนดไว้ในตัวอย่างโค้ดก่อนหน้า

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

การจัดการที่อยู่ที่ได้รับจากฟีเจอร์ป้อนที่อยู่อัตโนมัติ

การกําหนด ActivityResultLauncher ก่อนหน้านี้ยังกําหนดสิ่งที่ควรทําเมื่อระบบแสดงผลลัพธ์กิจกรรมในการเรียกกลับด้วย หากผู้ใช้เลือกการคาดการณ์ ระบบจะแสดงการคาดการณ์นั้นใน Intent ที่มีอยู่ในออบเจ็กต์ผลลัพธ์ เนื่องจาก Autocomplete.IntentBuilder สร้าง Intent ขึ้นมา เมธอด Autocomplete.getPlaceFromIntent() จึงดึงออบเจ็กต์สถานที่ออกจาก Intent ได้

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

จากนั้นเรียกใช้ Place.getAddressComponents() และจับคู่คอมโพเนนต์ที่อยู่แต่ละรายการกับช่องป้อนข้อมูลที่เกี่ยวข้องในแบบฟอร์มที่อยู่ โดยป้อนข้อมูลในช่องด้วยค่าจากสถานที่ที่ผู้ใช้เลือก

การบันทึกข้อมูลที่อยู่จากการคาดคะเนแทนที่อยู่ซึ่งป้อนด้วยตนเองจะช่วยให้มั่นใจว่าที่อยู่ถูกต้อง ทราบที่อยู่ และสามารถนำส่งถึงที่อยู่ดังกล่าวได้ รวมถึงลดการกดแป้นพิมพ์ของผู้ใช้

ข้อควรพิจารณาเมื่อใช้การเติมข้อความอัตโนมัติของสถานที่

ฟีเจอร์ป้อนข้อความอัตโนมัติของสถานที่มีตัวเลือกหลายรายการที่ช่วยให้การติดตั้งใช้งานมีความยืดหยุ่นหากคุณต้องการใช้มากกว่าวิดเจ็ต คุณสามารถใช้บริการต่างๆ ร่วมกันเพื่อให้ได้สิ่งที่ต้องการเพื่อจับคู่ตำแหน่งอย่างถูกต้อง

  • สําหรับแบบฟอร์มที่อยู่ ให้ตั้งค่าพารามิเตอร์ประเภทเป็น address เพื่อจํากัดการจับคู่ให้ตรงกับที่อยู่ที่สมบูรณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทที่รองรับในคำขอการเติมข้อความอัตโนมัติของสถานที่

  • ตั้งค่าข้อจำกัดและอคติที่เหมาะสมหากไม่จําเป็นต้องค้นหาทั่วโลก มีพารามิเตอร์หลายรายการที่ใช้ในการเอนเอียงหรือจํากัดการจับคู่ให้เฉพาะบางภูมิภาคเท่านั้น

    • ใช้ RectangularBounds เพื่อกำหนดขอบเขตสี่เหลี่ยมผืนผ้าเพื่อจำกัดพื้นที่ ใช้ setLocationRestriction() เพื่อให้ระบบแสดงเฉพาะที่อยู่ในพื้นที่เหล่านั้น

    • ใช้ setCountries() เพื่อจํากัดการตอบกลับไปยังบางประเทศ

  • ปล่อยให้ช่องแก้ไขได้ในกรณีที่การจับคู่ไม่ได้จับคู่กับบางช่อง และอนุญาตให้ลูกค้าอัปเดตที่อยู่ได้หากจำเป็น เนื่องจากที่อยู่ส่วนใหญ่ที่แสดงโดยฟีเจอร์ป้อนข้อความอัตโนมัติของสถานที่ไม่มีหมายเลขพร็อพเพอร์ตี้ย่อย เช่น หมายเลขอพาร์ตเมนต์ ห้องชุด หรือห้อง คุณจึงย้ายโฟกัสไปยังบรรทัดที่อยู่ 2 ได้เพื่อกระตุ้นให้ผู้ใช้กรอกข้อมูลดังกล่าว หากจำเป็น

แสดงภาพยืนยันที่อยู่

ตัวอย่างนี้ใช้ Maps SDK สำหรับ Android พร้อมใช้งานในแพลตฟอร์มต่อไปนี้ด้วย iOS | JavaScript

แสดงการยืนยันด้วยภาพสำหรับที่อยู่บนแผนที่ให้แก่ผู้ใช้เมื่อป้อนที่อยู่ ซึ่งช่วยให้ผู้ใช้มั่นใจมากขึ้นว่าที่อยู่นั้นถูกต้อง

รูปภาพต่อไปนี้แสดงแผนที่ใต้ที่อยู่ที่มีการปักหมุดที่ที่อยู่ซึ่งป้อน

ตัวอย่างต่อไปนี้ทำตามขั้นตอนพื้นฐานในการเพิ่มแผนที่ใน Android โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบ

กำลังเพิ่ม SupportMapFragment

ก่อนอื่น ให้เพิ่ม SupportMapFragment ไปยังไฟล์ XML เลย์เอาต์

    <fragment
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

จากนั้นเพิ่มข้อมูลโค้ดไปยังข้อมูลโค้ดย่อยหากยังไม่มี

    private void showMap(Place place) {
        coordinates = place.getLatLng();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

การเรียกใช้ตัวแฮนเดิลของข้อมูลโค้ดและลงทะเบียนการเรียกกลับ

  1. หากต้องการรับแฮนเดิลของข้อมูลโค้ด ให้เรียกใช้เมธอด FragmentManager.findFragmentById แล้วส่งรหัสทรัพยากรของข้อมูลโค้ดในไฟล์เลย์เอาต์ หากคุณเพิ่มข้อมูลโค้ดแบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณได้ดึงข้อมูลแฮนเดิลแล้ว

  2. เรียกใช้เมธอด getMapAsync เพื่อตั้งค่าการเรียกกลับในฟragment

เช่น หากคุณเพิ่มข้อมูลโค้ดแบบคงที่ ให้ทำดังนี้

Kotlin



val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

Java


SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

การจัดสไตล์และเพิ่มเครื่องหมายลงในแผนที่

เมื่อแผนที่พร้อมแล้ว ให้ตั้งค่าสไตล์ จัดกล้องให้อยู่ตรงกลาง และเพิ่มเครื่องหมายที่พิกัดของที่อยู่ป้อน โค้ดต่อไปนี้ใช้การจัดรูปแบบที่กําหนดไว้ในออบเจ็กต์ JSON หรือจะโหลดรหัสแผนที่ที่กําหนดไว้ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์ก็ได้

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

(ดูตัวอย่างโค้ดแบบเต็ม)

การปิดใช้การควบคุมแผนที่

หากต้องการทำให้แผนที่เรียบง่ายโดยแสดงตำแหน่งโดยไม่มีการควบคุมแผนที่เพิ่มเติม (เช่น เข็มทิศ แถบเครื่องมือ หรือฟีเจอร์อื่นๆ ในตัว) ให้ลองปิดใช้การควบคุมที่คุณคิดว่าไม่จำเป็น ใน Android อีกตัวเลือกหนึ่งคือเปิดใช้โหมด Lite เพื่อให้การโต้ตอบแบบจำกัด

การเปรียบเทียบที่อยู่ซึ่งผู้ใช้ป้อนกับตำแหน่งของอุปกรณ์

การรับหลักฐานแสดงที่อยู่ซึ่งมั่นใจว่าผู้ใช้อยู่ที่ที่อยู่ซึ่งป้อนอาจมีความซับซ้อนเนื่องจากปัจจัยต่างๆ เช่น ตำแหน่งของผู้ใช้จากระยะไกล ผู้ใช้ย้ายไปอยู่ที่ใหม่ หรือธุรกิจดิจิทัล (เช่น ธนาคารดิจิทัล) ที่ไม่มีสถานที่ตั้งจริงที่ผู้ใช้สามารถไปแสดงหลักฐานแสดงที่อยู่ด้วยใบเรียกเก็บเงินค่าสาธารณูปโภคหรือเอกสารอื่นๆ การให้วิธียืนยันที่อยู่ของผู้ใช้ทางดิจิทัลจะช่วยให้คุณมอบประสบการณ์การลงชื่อสมัครใช้ที่รวดเร็วและราบรื่นยิ่งขึ้น

ความปลอดภัยเป็นสิ่งสำคัญที่สุดในการตรวจสอบที่อยู่ โดยเฉพาะในกระบวนการลงชื่อสมัครใช้แบบดิจิทัล ส่วนนี้จะให้คําแนะนําและตัวอย่างสําหรับการตรวจสอบว่าตําแหน่งของผู้ใช้ระหว่างการลงชื่อสมัครใช้ตรงกับที่อยู่ซึ่งผู้ใช้ป้อนเป็นของตนเองหรือไม่

กระบวนการเปรียบเทียบที่อยู่ป้อนกับตำแหน่งอุปกรณ์มีขั้นตอนดังนี้

  1. การแปลงที่อยู่ซึ่งผู้ใช้ป้อนเป็นพิกัดทางภูมิศาสตร์
  2. การแจ้งให้ผู้ใช้ขอสิทธิ์ในการรับตําแหน่งของอุปกรณ์
  3. การคำนวณระยะทางระหว่างที่อยู่ที่คุณป้อนและตำแหน่งของอุปกรณ์ คุณเป็นผู้กำหนดระยะทางสูงสุดที่จะนับสำหรับการจับคู่ที่อยู่กับสถานที่

รูปภาพต่อไปนี้เป็นตัวอย่างวิธีที่คุณอาจแจ้งให้ผู้ใช้เปรียบเทียบที่อยู่ซึ่งป้อนกับตำแหน่งปัจจุบัน

แปลงที่อยู่ซึ่งผู้ใช้ป้อนเป็นพิกัดทางภูมิศาสตร์

ตัวอย่างนี้ใช้ Places SDK สำหรับ Android พร้อมใช้งานในแพลตฟอร์มต่อไปนี้ด้วย iOS | JavaScript | Geocoding API

หลังจากผู้ใช้ยอมรับการยืนยันที่อยู่ (โดยการแตะ "ยืนยันว่าฉันอยู่ที่นั่น" ในรูปภาพก่อนหน้า) ขั้นตอนแรกในการเปรียบเทียบที่อยู่กับตำแหน่งปัจจุบันคือการแปลงที่อยู่ป้อนเป็นพิกัดภูมิศาสตร์

หากผู้ใช้เลือกที่อยู่ด้วยฟีเจอร์ป้อนข้อความอัตโนมัติของสถานที่ ให้ขอ Place.Field.LAT_LNG ในรายการช่องป้อนข้อความอัตโนมัติของสถานที่ตามที่แสดงในข้อมูลโค้ดการเพิ่มวิดเจ็ตป้อนข้อความอัตโนมัติของสถานที่ และเรียกใช้เมธอด Place.getLatLng() เพื่อรับพิกัดทางภูมิศาสตร์ของที่อยู่ซึ่งเลือก

coordinates = place.getLatLng();

หากผู้ใช้ป้อนที่อยู่ด้วยตนเองหรือทำการแก้ไขหลังจากที่ Place Autocomplete กรอกข้อมูลในช่องแล้ว ให้ใช้บริการ Geocoder ของ Android หรือ Geocoding API เพื่อค้นหาพิกัดที่สอดคล้องกับที่อยู่นั้น

ตัวอย่าง

https://maps.googleapis.com/maps/api/geocode/json?address=1600%20Amphitheatre%2BParkway%2C%20Mountain%20View%2C%20CA%2094043&key=YOUR_API_KEY

อย่าลืมเข้ารหัส URL การเรียกใช้ Geocoding API

ข้อมูลอ้างอิงสั้นๆ เกี่ยวกับการเข้ารหัส URL: %20 = เว้นวรรค, %2B = + (เครื่องหมายบวก), %2C = , (คอมมา)

การแจ้งให้ผู้ใช้ขอสิทธิ์เข้าถึงตำแหน่งของอุปกรณ์

หากต้องการทราบตำแหน่งของอุปกรณ์ของผู้ใช้ คุณต้องขอสิทธิ์จากผู้ใช้เพื่อเปิดใช้บริการตำแหน่ง ใช้คำแนะนำในเอกสารประกอบของ Android เกี่ยวกับการสร้างแอปที่รับรู้ถึงตำแหน่ง โดยทำตามขั้นตอนต่อไปนี้

  • ขอสิทธิ์เข้าถึงตำแหน่งเป็นการให้สิทธิ์แบบครั้งเดียวในระดับที่แน่นอน (ACCESS_FINE_LOCATION)

  • หากผู้ใช้ให้สิทธิ์เข้าถึงตำแหน่ง ให้รับตำแหน่งของผู้ใช้

  • หากผู้ใช้ปฏิเสธการเข้าถึงตำแหน่ง ให้จัดการการปฏิเสธอย่างเหมาะสม ตัวอย่างเช่น คุณอาจแสดงข้อความประเภทต่อไปนี้ (สมมติว่าคุณไม่ได้จัดเก็บตำแหน่งปัจจุบันของผู้ใช้)

    "หากไม่อนุญาตให้แอปทราบตำแหน่งที่แน่นอน คุณจะต้องยืนยันทางไปรษณีย์เพื่อเปิดใช้งานบัญชี [OK]"

รูปภาพต่อไปนี้แสดงตัวอย่างข้อความแจ้งให้ผู้ใช้อนุญาตสิทธิ์ในการรับตําแหน่งของอุปกรณ์

หากต้องการตรวจสอบสิทธิ์เข้าถึงตำแหน่ง ให้เตรียมตัวเปิดใช้งานกิจกรรมที่จะรอผลลัพธ์จากกิจกรรมที่เปิดใช้งานด้วย ActivityResultLauncher การเรียกกลับผลลัพธ์จะมีสตริงที่ระบุว่าผู้ใช้ให้สิทธิ์หรือปฏิเสธสิทธิ์ที่ขอ

    // Register the permissions callback, which handles the user's response to the
    // system permissions dialog. Save the return value, an instance of
    // ActivityResultLauncher, as an instance variable.
    private final ActivityResultLauncher<String> requestPermissionLauncher =
            registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Since ACCESS_FINE_LOCATION is the only permission in this sample,
                    // run the location comparison task once permission is granted.
                    // Otherwise, check which permission is granted.
                    getAndCompareLocations();
                } else {
                    // Fallback behavior if user denies permission
                    Log.d(TAG, "User denied permission");
                }
            });

จากนั้นตรวจสอบว่าแอปมีสิทธิ์ ACCESS_FINE_LOCATION อยู่แล้วหรือไม่ หากไม่ ให้ขอสิทธิ์จากผู้ใช้โดยเปิดกิจกรรมคำขอสิทธิ์โดยใช้ตัวเปิดใช้งานที่กําหนดไว้ในขั้นตอนก่อนหน้า

    private void checkLocationPermissions() {
        if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
                == PackageManager.PERMISSION_GRANTED) {
            getAndCompareLocations();
        } else {
            requestPermissionLauncher.launch(
                    ACCESS_FINE_LOCATION);
        }
    }

เมื่อได้รับสิทธิ์ ACCESS_FINE_LOCATION แล้ว ให้ใช้ผู้ให้บริการตำแหน่งแบบรวมเพื่อรับตำแหน่งล่าสุดที่ทราบของอุปกรณ์และสร้างออบเจ็กต์ LatLng จากตำแหน่งดังกล่าว

        FusedLocationProviderClient fusedLocationClient =
                LocationServices.getFusedLocationProviderClient(this);

        fusedLocationClient.getLastLocation()
                .addOnSuccessListener(this, location -> {
                    // Got last known location. In some rare situations this can be null.
                    if (location == null) {
                        return;
                    }

                    deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
                    // ...
                });
    }

การคำนวณระยะทางระหว่างที่อยู่ที่คุณป้อนและตำแหน่งของอุปกรณ์

ใช้คณิตศาสตร์เพื่อคำนวณระยะทางระหว่างพิกัดละติจูด/ลองจิจูด 2 รายการ (ที่อยู่และตำแหน่งอุปกรณ์ที่ป้อน) ไลบรารียูทิลิตี Maps SDK สำหรับ Android แบบโอเพนซอร์สมีเมธอดที่มีประโยชน์ในการคำนวณระยะทางทรงกลมระหว่างจุด 2 จุดบนโลก

ก่อนอื่น ให้ติดตั้งไลบรารียูทิลิตี Maps SDK สำหรับ Android โดยเพิ่ม Dependency ต่อไปนี้ลงในไฟล์ build.gradle.kts ของแอป

dependencies {


    // Utility Library for Maps SDK for Android
    // You do not need to add a separate dependency for the Maps SDK for Android
    // since this library builds in the compatible version of the Maps SDK.
    implementation("com.google.maps.android:android-maps-utils:3.8.2")
}

จากนั้นกลับไปที่ไฟล์กิจกรรมหลังจากได้รับตำแหน่งล่าสุดที่ทราบของอุปกรณ์ ให้กําหนดรัศมีเป็นเมตรเพื่อพิจารณาว่า 2 ตําแหน่ง "ตรงกัน" รัศมีควรกว้างพอที่จะพิจารณาความแม่นยำของ GPS ที่ผันผวนและขนาดของสถานที่ตามที่อยู่ของผู้ใช้ เช่น

private static final double acceptableProximity = 150;

จากนั้นใช้เมธอดไลบรารียูทิลิตี computeDistanceBetween() เพื่อคํานวณระยะทางระหว่างตําแหน่งอุปกรณ์กับตําแหน่งที่อยู่ซึ่งผู้ใช้ป้อน หากระยะทางอยู่ภายในรัศมีที่กําหนดไว้ข้างต้น ให้ถือว่าสถานที่ตรงกัน

// Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
// to use spherical geometry to compute the distance between two Lat/Lng points.
double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
if (distanceInMeters <= acceptedProximity) {
    Log.d(TAG, "location matched");
    // TODO: Display UI based on the locations matching
} else {
    Log.d(TAG, "location not matched");
    // TODO: Display UI based on the locations not matching
}

(ดูตัวอย่างโค้ดแบบเต็ม)

หากที่อยู่และสถานที่ตรงกัน ให้แสดงการยืนยันในแอปดังที่แสดงในรูปภาพต่อไปนี้

เคล็ดลับในการปรับปรุงการลงชื่อสมัครใช้แบบรวดเร็วและยืนยันแล้วให้ดียิ่งขึ้น

อนุญาตให้ผู้ใช้ป้อนที่อยู่ตามชื่อธุรกิจหรือจุดที่น่าสนใจ บริการคาดคะเนแบบ "พิมพ์ล่วงหน้า" ไม่เพียงใช้ได้กับที่อยู่เท่านั้น แต่คุณยังเลือกให้ผู้ใช้ป้อนชื่อธุรกิจหรือสถานที่สำคัญได้ด้วย หากต้องการอนุญาตให้ป้อนทั้งที่อยู่และชื่อสถานประกอบการ ให้นำพร็อพเพอร์ตี้ types ออกจากคำจำกัดความของฟีเจอร์เติมข้อความอัตโนมัติ

ปรับแต่งรูปลักษณ์ของช่องการเติมข้อความอัตโนมัติของสถานที่ให้เข้ากับสไตล์เว็บไซต์ หากต้องการควบคุมรูปลักษณ์ของฟีเจอร์ป้อนข้อความอัตโนมัติของสถานที่ในแอปแทนที่จะใช้วิดเจ็ตของ Google คุณสามารถใช้ฟีเจอร์ป้อนข้อความอัตโนมัติของสถานที่แบบเป็นโปรแกรมเพื่อขับเคลื่อน UI ที่คุณสร้างด้วยบริการป้อนข้อความอัตโนมัติของสถานที่