ภาพรวม
Google Maps Platform พร้อมใช้งานสำหรับเว็บ (JS, TS), Android และ iOS, รวมถึงมี API ของเว็บเซอร์วิสสำหรับการรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทาง ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มเดียว แต่ ลิงก์เอกสารประกอบสำหรับการติดตั้งใช้งานในแพลตฟอร์มอื่นๆ ไว้ให้แล้ว
Quick Builder ในคอนโซล Google Cloud ช่วยให้คุณสร้างการเติมข้อความอัตโนมัติในแบบฟอร์มที่อยู่ได้โดยใช้ UI แบบอินเทอร์แอกทีฟที่จะสร้างโค้ด JavaScript ให้คุณ
ผู้ใช้คุ้นเคยกับการใช้ชีวิตและทำงานในโลกดิจิทัลที่ความสะดวก รวดเร็ว และปลอดภัยเป็นสิ่งที่คาดหวัง เมื่อสมัครขอรับบริการต่างๆ เช่น บัตรเครดิต บัญชีธนาคาร หรือสินเชื่อ ผู้ใช้คาดหวังว่ากระบวนการดังกล่าวจะรวดเร็วและง่ายดาย
ยิ่งผู้ใช้ต้องพิมพ์หรือป้อนข้อมูลที่ซ้ำกันมากเท่าใด คุณก็ยิ่งมีโอกาสน้อยลงที่จะรักษาผู้ใช้ไว้เป็นลูกค้า การสร้างประสบการณ์การลงชื่อสมัครใช้ที่รวดเร็ว ง่าย และยืนยันแล้วจะช่วยปรับปรุงประสบการณ์ของผู้ใช้ไปพร้อมกับช่วยให้คุณได้เปรียบในการรักษาผู้ใช้ไว้ในเว็บไซต์
ที่อยู่ที่ป้อนด้วยตนเองอาจทำให้ Conversion ลดลง ข้อมูล CRM ไม่ถูกต้อง และข้อผิดพลาดในการจัดส่งที่มีค่าใช้จ่ายสูง การลงชื่อสมัครใช้แบบด่วนและยืนยันแล้วช่วยให้การลงชื่อสมัครใช้เร็วขึ้น โดยจะแนะนำที่อยู่ใกล้เคียงทันทีด้วยการแตะนิ้วโป้งเพียงไม่กี่ครั้งและแสดงที่อยู่ที่ป้อนเพื่อให้ยืนยันด้วยสายตา ซึ่งช่วยให้ผู้ใช้มั่นใจว่าได้ป้อนที่อยู่ที่ถูกต้อง การยืนยันที่อยู่ของผู้ใช้โดยใช้ตำแหน่งปัจจุบันยังช่วยป้องกันการฉ้อโกงและเสริมสร้างความมั่นใจของผู้ใช้ในผลิตภัณฑ์และบริการของคุณ นอกจากนี้ การยืนยันยังช่วยเพิ่มความมั่นใจในการให้บริการบัญชีธนาคารเสมือนและบัตรเครดิตได้ทันที
เอกสารนี้ให้คำแนะนำในการติดตั้งใช้งานเพื่อสร้างประสบการณ์การลงชื่อสมัครใช้แบบด่วนและยืนยันแล้วด้วย Google Maps Platform เนื่องจากผู้ใช้ส่วนใหญ่จะลงชื่อสมัครใช้ในอุปกรณ์เคลื่อนที่ ตัวอย่างการติดตั้งใช้งานส่วนใหญ่ในเอกสารนี้จึงเน้นที่ Android ดูตัวอย่างที่เสร็จสมบูรณ์ได้ที่ ซอร์สโค้ดตัวอย่าง นอกจากนี้ คุณยังใช้ iOS SDK เพื่อให้บรรลุเป้าหมายเดียวกันได้ด้วย
แผนภาพต่อไปนี้แสดง API หลักที่เกี่ยวข้องกับการสร้างโซลูชัน (คลิกเพื่อขยาย)
กำลังเปิดใช้ API
หากต้องการใช้คำแนะนำเหล่านี้ คุณต้องเปิดใช้ API ต่อไปนี้ในคอนโซล Google Cloud
- Maps SDK สำหรับ Android (หรือ API สำหรับแพลตฟอร์มที่คุณเลือก)
- Places API
- Geocoding API
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่หัวข้อเริ่มต้น ใช้งาน Google Maps Platform
ส่วนแนวทางปฏิบัติแนะนำ
เอกสารนี้ครอบคลุมแนวทางปฏิบัติและการปรับแต่งต่อไปนี้
- ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติแนะนำหลัก
- ไอคอนดาวเป็นการปรับแต่งที่เลือกได้แต่แนะนำให้ใช้ เพื่อปรับปรุงโซลูชัน
| การเพิ่มการเติมข้อความอัตโนมัติลงในช่องป้อนข้อมูล | ป้อนข้อมูลแบบฟอร์มที่อยู่โดยอัตโนมัติ เพิ่มฟังก์ชันการทำงานแบบพิมพ์ไปแสดงไปเพื่อ ปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์มและปรับปรุงความถูกต้องของที่อยู่ด้วยการพิมพ์น้อยที่สุด | |
| การยืนยันที่อยู่ด้วยภาพ | ให้ผู้ใช้เห็นที่อยู่ของตนเองบนแผนที่เป็นการยืนยันด้วยภาพ ว่าได้ป้อนที่อยู่ที่ถูกต้อง | |
| การเปรียบเทียบที่อยู่ที่ผู้ใช้ป้อนกับตำแหน่งของอุปกรณ์ | เปรียบเทียบที่อยู่ที่ผู้ใช้เลือกหรือป้อนกับ ตำแหน่งปัจจุบันของอุปกรณ์เพื่อช่วยยืนยันว่าผู้ใช้อยู่ที่ อยู่ที่ระบุ (ผู้ใช้ควรอยู่ที่บ้าน เมื่อลงชื่อสมัครใช้เพื่อให้การเปรียบเทียบนี้ทำงานได้) | |
| เคล็ดลับในการปรับปรุงการลงชื่อสมัครใช้แบบด่วนและยืนยันแล้วให้ดียิ่งขึ้น | คุณสามารถปรับปรุงการป้อนที่อยู่ให้ดียิ่งขึ้นได้ด้วยการเพิ่มฟีเจอร์ต่างๆ เช่น การปรับแต่งรูปลักษณ์ของวิดเจ็ตการเติมข้อความอัตโนมัติ หรืออนุญาตให้ผู้ใช้เลือกชื่อธุรกิจหรือสถานที่สำคัญเป็นที่อยู่ |
การเพิ่มการเติมข้อความอัตโนมัติลงในช่องป้อนข้อมูล
| ตัวอย่างนี้ใช้ Places SDK สำหรับ Android | พร้อมใช้งานสำหรับ iOS | JavaScript |
Place Autocomplete สามารถลดความซับซ้อนในการป้อนที่อยู่ในแอปพลิเคชัน ซึ่งจะช่วยเพิ่มอัตรา Conversion และมอบประสบการณ์ที่ราบรื่นให้กับลูกค้า การเติมข้อความอัตโนมัติมีช่องป้อนข้อมูลเดียวที่ป้อนข้อมูลได้อย่างรวดเร็วพร้อมการคาดการณ์ที่อยู่แบบ "พิมพ์ไปแสดงไป" ซึ่งใช้เพื่อป้อนข้อมูลในแบบฟอร์มที่อยู่สำหรับการลงชื่อสมัครใช้โดยอัตโนมัติได้ การรวม Place Autocomplete ไว้ในขั้นตอนการลงชื่อสมัครใช้จะช่วยให้คุณทำสิ่งต่อไปนี้ได้
- ลดข้อผิดพลาดในการป้อนที่อยู่
- ลดจำนวนขั้นตอนในกระบวนการลงชื่อสมัครใช้
- ลดความซับซ้อนในการป้อนที่อยู่ในอุปกรณ์เคลื่อนที่หรืออุปกรณ์ที่สวมใส่ได้
- ลดการพิมพ์และเวลาทั้งหมดที่ลูกค้าต้องใช้ในการลงชื่อสมัครใช้อย่างมาก
เมื่อผู้ใช้เลือกช่องป้อนข้อมูลการเติมข้อความอัตโนมัติและเริ่มพิมพ์ รายการที่อยู่ที่คาดการณ์ไว้จะปรากฏขึ้น
เมื่อผู้ใช้เลือกที่อยู่จากรายการที่คาดการณ์ไว้ คุณสามารถใช้คำตอบเพื่อยืนยันที่อยู่และรับตำแหน่งได้ จากนั้นแอปพลิเคชันจะป้อนข้อมูลในช่องที่ถูกต้องของแบบฟอร์มป้อนที่อยู่ ดังที่แสดงในรูปภาพต่อไปนี้
วิดีโอ: ปรับปรุงแบบฟอร์มที่อยู่ด้วย Place Autocomplete
แบบฟอร์มที่อยู่
Android
iOS
เว็บ
Google Maps Platform มีวิดเจ็ต Place Autocomplete สำหรับแพลตฟอร์มอุปกรณ์เคลื่อนที่และเว็บ วิดเจ็ตที่แสดงในรูปภาพก่อนหน้านี้มีกล่องโต้ตอบการค้นหาพร้อมฟังก์ชันการทำงานของการเติมข้อความอัตโนมัติในตัว ซึ่งคุณสามารถเพิ่มประสิทธิภาพสำหรับการค้นหาที่กำหนดขอบเขตตามสถานที่ได้ด้วย
ส่วนนี้จะอธิบายวิธีใช้ Place Autocomplete สำหรับการลงชื่อสมัครใช้แบบด่วนและยืนยันแล้ว
การเพิ่มวิดเจ็ต Place Autocomplete
ใน Android คุณสามารถเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติได้โดยใช้ Intent การเติมข้อความอัตโนมัติ ที่จะเปิดใช้ Place Autocomplete จากช่องป้อนข้อมูลบรรทัดที่อยู่ 1 ซึ่งเป็นที่ที่ ผู้ใช้จะเริ่มป้อนที่อยู่ เมื่อเริ่มพิมพ์ ผู้ใช้จะเลือกที่อยู่จากรายการการคาดคะเนการเติมข้อความอัตโนมัติได้
ขั้นแรก ให้เตรียมตัวเปิดใช้กิจกรรมโดยใช้
ActivityResultLauncher,
ที่จะรอรับผลลัพธ์
จากกิจกรรมที่เปิดใช้ การเรียกกลับผลลัพธ์จะมีออบเจ็กต์ Place ที่สอดคล้องกับที่อยู่ที่ผู้ใช้เลือกจากที่คาดการณ์ไว้ของการเติมข้อความอัตโนมัติ
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"); } });
จากนั้นกำหนดพร็อพเพอร์ตี้ fields, location และ type ของ
Intent Place Autocomplete แล้วสร้าง 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.LOCATION, Place.Field.VIEWPORT); // Build the autocomplete intent with field, country, and type filters applied Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields) .setCountries(List.of("US")) // IMPORTANT: the widget uses the legacy api .setTypesFilter(List.of(PlaceTypes.ADDRESS)) .build(this); startAutocomplete.launch(intent); }
การจัดการที่อยู่ที่ Place Autocomplete แสดงผล
การกำหนด ActivityResultLauncher ไว้ก่อนหน้านี้ยังกำหนดสิ่งที่ควรทำเมื่อระบบแสดงผลลัพธ์ของกิจกรรมในการเรียกกลับ หากผู้ใช้เลือกที่คาดการณ์ไว้ ระบบจะส่งที่คาดการณ์ไว้ใน Intent ที่อยู่ในออบเจ็กต์ผลลัพธ์ เนื่องจาก Intent สร้างขึ้นโดย Autocomplete.IntentBuilder เมธอด Autocomplete.getPlaceFromIntent() จึงแยกออบเจ็กต์ Place ออกจาก 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() และจับคู่คอมโพเนนต์ที่อยู่แต่ละรายการกับช่องป้อนข้อมูลที่เกี่ยวข้องในแบบฟอร์มที่อยู่ โดยป้อนข้อมูลในช่องด้วยค่าจาก Place ที่ผู้ใช้เลือก
การรับข้อมูลที่อยู่จากการคาดการณ์แทนที่จะรับจากที่อยู่ที่ป้อนด้วยตนเองจะช่วยให้มั่นใจได้ว่าที่อยู่นั้นมีความแม่นยำ ที่อยู่เป็นที่รู้จักและสามารถจัดส่งได้ รวมถึงลดการพิมพ์ของผู้ใช้
ข้อควรพิจารณาเมื่อใช้ Place Autocomplete
Place Autocomplete มีตัวเลือกมากมายที่ช่วยให้คุณติดตั้งใช้งานได้อย่างยืดหยุ่นหากต้องการใช้มากกว่าแค่วิดเจ็ต คุณสามารถใช้บริการต่างๆ ร่วมกันเพื่อให้ได้สิ่งที่ต้องการเพื่อจับคู่สถานที่ในวิธีที่ถูกต้อง
สำหรับแบบฟอร์มที่อยู่ ให้ตั้งค่าพารามิเตอร์ types เป็น
addressเพื่อจำกัดการค้นหาให้แสดงเฉพาะที่อยู่แบบเต็ม ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประเภทที่รองรับในคำขอ Place Autocompleteตั้งค่าข้อจำกัดและค่าความเอนเอียง ที่เหมาะสมหากไม่จำเป็นต้องค้นหาทั่วโลก มีพารามิเตอร์มากมายที่ใช้เพื่อกำหนดค่าความเอนเอียงหรือจำกัดการค้นหาให้แสดงเฉพาะภูมิภาคที่เฉพาะเจาะจงได้
ใช้
RectangularBoundsเพื่อตั้งค่าขอบเขตสี่เหลี่ยมผืนผ้าเพื่อจำกัดพื้นที่ และใช้setLocationRestriction()เพื่อให้แน่ใจว่าระบบจะแสดงเฉพาะที่อยู่ในพื้นที่เหล่านั้นใช้
setCountries()เพื่อจำกัดคำตอบให้แสดงเฉพาะบางประเทศ
ปล่อยให้ช่องแก้ไขได้ในกรณีที่ระบบไม่พบข้อมูลในบางช่อง และอนุญาตให้ลูกค้าอัปเดตที่อยู่หากจำเป็น เนื่องจากที่อยู่ส่วนใหญ่ที่ Place Autocomplete แสดงผลไม่มีหมายเลขย่อย เช่น หมายเลขอพาร์ตเมนต์ หมายเลขห้อง หรือหมายเลขยูนิต คุณจึงย้ายโฟกัสไปที่บรรทัดที่อยู่ 2 เพื่อกระตุ้นให้ผู้ใช้กรอกข้อมูลดังกล่าวหากจำเป็น
การยืนยันที่อยู่ด้วยภาพ
| ตัวอย่างนี้ใช้ Maps SDK สำหรับ Android | พร้อมใช้งานสำหรับ iOS | JavaScript |
แสดงการยืนยันที่อยู่ด้วยภาพบนแผนที่ให้ผู้ใช้เห็นในขั้นตอนการป้อนที่อยู่ ซึ่งจะช่วยให้ผู้ใช้มั่นใจได้มากขึ้นว่าที่อยู่นั้นถูกต้อง
รูปภาพต่อไปนี้แสดงแผนที่ใต้ที่อยู่พร้อมหมุดที่ที่อยู่ที่ป้อน
ตัวอย่างต่อไปนี้แสดงขั้นตอนพื้นฐานในการเพิ่มแผนที่ ใน Android โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบ
- การเพิ่ม
SupportMapFragment(ในกรณีนี้คือการเพิ่ม Fragment แบบไดนามิก) - การรับตัวจัดการ Fragment และการลงทะเบียนการเรียกกลับ
- การจัดรูปแบบและการเพิ่มมาร์กเกอร์ลงในแผนที่
- การปิดใช้การควบคุมแผนที่
การเพิ่ม SupportMapFragment
ขั้นแรก ให้เพิ่ม Fragment 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"/>จากนั้นเพิ่ม Fragment แบบเป็นโปรแกรมหากยังไม่มี
private void showMap(Place place) {
coordinates = place.getLocation();
// 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);
}
}การรับตัวจัดการ Fragment และการลงทะเบียนการเรียกกลับ
หากต้องการรับตัวจัดการ Fragment ให้เรียกใช้เมธอด
FragmentManager.findFragmentByIdและส่งรหัสทรัพยากรของ Fragment ในไฟล์เลย์เอาต์ หากเพิ่ม Fragment แบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณได้ดึงตัวจัดการมาแล้วเรียกใช้เมธอด
getMapAsyncเพื่อตั้งค่า การเรียกกลับใน Fragment
ตัวอย่างเช่น หากคุณเพิ่ม Fragment แบบคงที่ ให้ทำดังนี้
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 เพื่อให้มีการโต้ตอบแบบจำกัด ได้
การเปรียบเทียบที่อยู่ที่ผู้ใช้ป้อนกับตำแหน่งของอุปกรณ์
การขอหลักฐานแสดงที่อยู่ ซึ่งเป็นการยืนยันว่าผู้ใช้อยู่ที่อยู่ที่ป้อน อาจซับซ้อนเนื่องจากปัจจัยต่างๆ เช่น ตำแหน่งของผู้ใช้ที่อยู่ระยะไกล ผู้ใช้ย้ายไปอยู่ที่อยู่ใหม่ หรือธุรกิจดิจิทัล (เช่น ธนาคารดิจิทัล) ที่ไม่มีสถานที่ตั้งจริงให้ผู้ใช้ไปยื่นหลักฐานแสดงที่อยู่พร้อมใบเรียกเก็บเงินค่าสาธารณูปโภคหรือเอกสารอื่นๆ การจัดหาวิธีการดิจิทัลในการยืนยันที่อยู่ของผู้ใช้จะช่วยให้คุณมอบประสบการณ์การลงชื่อสมัครใช้ที่รวดเร็วและราบรื่น
ความปลอดภัยเป็นสิ่งสำคัญที่สุดในการตรวจสอบที่อยู่ โดยเฉพาะอย่างยิ่งกับกระบวนการลงชื่อสมัครใช้แบบดิจิทัล ส่วนนี้ให้คำแนะนำและตัวอย่างสำหรับการตรวจสอบว่าตำแหน่งของผู้ใช้ระหว่างการลงชื่อสมัครใช้ตรงกับที่อยู่ที่ผู้ใช้ป้อนหรือไม่
กระบวนการเปรียบเทียบที่อยู่ที่ป้อนกับตำแหน่งของอุปกรณ์มีขั้นตอนดังนี้
- แปลงที่อยู่ที่ผู้ใช้ป้อนเป็นพิกัดทางภูมิศาสตร์
- ขอสิทธิ์จากผู้ใช้ในการรับตำแหน่งของอุปกรณ์
- คำนวณระยะห่างระหว่างที่อยู่ที่ป้อนกับตำแหน่งของอุปกรณ์ คุณกำหนดระยะทางสูงสุดที่จะถือว่าที่อยู่ตรงกับตำแหน่งได้
รูปภาพต่อไปนี้แสดงตัวอย่างวิธีแจ้งให้ผู้ใช้เปรียบเทียบที่อยู่ที่ป้อนกับตำแหน่งปัจจุบัน
แปลงที่อยู่ที่ผู้ใช้ป้อนเป็นพิกัดทางภูมิศาสตร์
| ตัวอย่างนี้ใช้ Places SDK สำหรับ Android | พร้อมใช้งานสำหรับ iOS | JavaScript | Geocoding API |
หลังจากผู้ใช้ตกลงที่จะยืนยันที่อยู่ (โดยแตะ "ยืนยันว่าฉันอยู่ที่นี่ตอนนี้" ในรูปภาพก่อนหน้านี้) ขั้นตอนแรกในการเปรียบเทียบที่อยู่กับตำแหน่งปัจจุบันคือการแปลงที่อยู่ที่ป้อนเป็นพิกัดทางภูมิศาสตร์
หากผู้ใช้เลือกที่อยู่ด้วย Place Autocomplete โปรดขอ
Place.Field.LAT_LNG ในรายการช่อง Place Autocomplete ดังที่แสดงใน
ข้อมูลโค้ดการเพิ่มวิดเจ็ต Place Autocomplete และเรียกใช้
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)หากผู้ใช้ให้สิทธิ์เข้าถึงตำแหน่ง ให้รับตำแหน่งของผู้ใช้
หากผู้ใช้ปฏิเสธการเข้าถึงตำแหน่ง ให้จัดการการปฏิเสธอย่างเหมาะสม เช่น คุณอาจแสดงข้อความประเภทต่อไปนี้ (สมมติว่าคุณไม่ได้จัดเก็บตำแหน่งปัจจุบันของผู้ใช้)
"หากคุณไม่แจ้งตำแหน่งที่แน่นอนให้แอปทราบ คุณจะต้องยืนยันทางอีเมลเพื่อเปิดใช้งานบัญชี [ตกลง]"
รูปภาพต่อไปนี้แสดงตัวอย่างข้อความแจ้งให้ผู้ใช้ให้สิทธิ์ในการรับตำแหน่งของอุปกรณ์
หากต้องการตรวจสอบสิทธิ์เข้าถึงตำแหน่ง ให้เตรียมตัวเปิดใช้กิจกรรมที่จะ
รอรับผลลัพธ์
จากกิจกรรมที่เปิดใช้ด้วย
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(libs.android.maps.utils) }
จากนั้นกลับไปที่ไฟล์กิจกรรมหลังจากได้รับตำแหน่งล่าสุดที่ทราบของอุปกรณ์แล้ว ให้กำหนดรัศมีเป็นเมตรเพื่อพิจารณาว่าตำแหน่ง 2 ตำแหน่ง "ตรงกัน" รัศมีควรมีขนาดใหญ่พอที่จะคำนึงถึงความแปรปรวนของความแม่นยำของ GPS และขนาดของสถานที่ที่อยู่ที่ผู้ใช้ป้อน เช่น
private static final double acceptableProximity = 150;
จากนั้นใช้เมธอด computeDistanceBetween()
ของ Utility Library เพื่อคำนวณระยะห่างระหว่างตำแหน่งของอุปกรณ์กับตำแหน่งที่อยู่ที่ผู้ใช้ป้อน
หากระยะห่างอยู่ในรัศมีที่กำหนดไว้ข้างต้น ให้ถือว่าตำแหน่งตรงกัน
// 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 ออกจากคำจำกัดความของการเติมข้อความอัตโนมัติ
ปรับแต่งรูปลักษณ์ของกล่อง Place Autocomplete ให้เข้ากับสไตล์เว็บไซต์ หากต้องการควบคุมรูปลักษณ์ของ Place Autocomplete ในแอปแทนที่จะใช้วิดเจ็ตของ Google คุณสามารถใช้ Place Autocomplete แบบเป็นโปรแกรม เพื่อขับเคลื่อน UI ที่คุณสร้างด้วยบริการ Place Autocomplete ได้