เกริ่นนำ
การเติมข้อความอัตโนมัติเป็นฟีเจอร์ของไลบรารี Places ใน Maps JavaScript API คุณสามารถใช้การเติมข้อความอัตโนมัติเพื่อกำหนดลักษณะการทำงานของการค้นหาแบบล่วงหน้าสำหรับช่องค้นหาของ Google Maps แก่แอปพลิเคชัน บริการเติมข้อความอัตโนมัติสามารถจับคู่กับคำเต็มและสตริงย่อย ซึ่งจะช่วยแปลค่าชื่อสถานที่ ที่อยู่ และรหัสบวก แอปพลิเคชันจึงสามารถส่งข้อความค้นหาเมื่อผู้ใช้พิมพ์ เพื่อคาดการณ์สถานที่ได้ทันที ตามคำจำกัดความใน Places API "สถานที่" อาจเป็นสถานประกอบการ สถานที่ตั้งทางภูมิศาสตร์ หรือจุดสนใจที่โดดเด่น
เริ่มต้นใช้งาน
ก่อนที่จะใช้ไลบรารี Places ใน Maps JavaScript API ก่อนอื่นให้ตรวจสอบว่าได้เปิดใช้ Places API ในคอนโซล Google Cloud ในโปรเจ็กต์เดียวกับที่คุณตั้งค่าไว้สำหรับ Maps JavaScript API
วิธีดูรายการ API ที่เปิดใช้
- ไปที่คอนโซล Google Cloud
- คลิกปุ่มเลือกโปรเจ็กต์ จากนั้นเลือกโปรเจ็กต์เดียวกันกับที่คุณตั้งค่าไว้สำหรับ Maps JavaScript API แล้วคลิกเปิด
- จากรายการ API ในหน้าแดชบอร์ด ให้มองหา Places API
- หากเห็น API ในรายการ นั่นหมายความว่าทุกอย่างเรียบร้อยแล้ว หาก API ไม่อยู่ในรายการ ให้เปิดใช้โดยทำดังนี้
- ที่ด้านบนของหน้า ให้เลือกเปิดใช้ API เพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
- ค้นหา Places API แล้วเลือกจากรายการผลลัพธ์
- เลือกเปิดใช้ เมื่อเสร็จสิ้นกระบวนการแล้ว Places API จะปรากฏในรายการ API ในหน้าแดชบอร์ด
กำลังโหลดไลบรารี
บริการ Places เป็นไลบรารีที่มีในตัวแยกต่างหากจากโค้ด Maps JavaScript API หลัก หากต้องการใช้ฟังก์ชันการทำงานที่อยู่ในไลบรารีนี้ ก่อนอื่นคุณต้องโหลดโดยใช้พารามิเตอร์ libraries
ใน URL Bootstrap ของ Maps API ดังนี้
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>
ดูข้อมูลเพิ่มเติมที่ ภาพรวมของไลบรารี
สรุปชั้นเรียน
API มีวิดเจ็ตเติมข้อความอัตโนมัติ 2 ประเภท ซึ่งคุณจะเพิ่มผ่านคลาส Autocomplete
และ SearchBox
ตามลำดับได้
นอกจากนี้ คุณยังใช้คลาส AutocompleteService
เพื่อดึงผลลัพธ์ของการเติมข้อความอัตโนมัติแบบเป็นโปรแกรมได้ด้วย (ดูข้อมูลอ้างอิงของ Maps JavaScript API: คลาส AutocompleteService)
ด้านล่างนี้เป็นสรุปชั้นเรียนที่มีให้บริการ
-
Autocomplete
จะเพิ่มช่องป้อนข้อความลงในหน้าเว็บ และตรวจสอบช่องนั้นเพื่อหารายการอักขระ เมื่อผู้ใช้ป้อนข้อความ การเติมข้อความอัตโนมัติจะแสดงการคาดคะเนสถานที่ในรูปแบบของรายการตัวเลือกแบบเลื่อนลง เมื่อผู้ใช้เลือกสถานที่จากรายการ ระบบจะส่งข้อมูลเกี่ยวกับสถานที่นั้นกลับไปยังออบเจ็กต์เติมข้อความอัตโนมัติ ซึ่งแอปพลิเคชันของคุณจะดึงข้อมูลได้ โปรดดูรายละเอียดด้านล่างภาพที่ 1: ช่องข้อความที่ป้อนอัตโนมัติและรายการที่เลือก ภาพที่ 2: แบบฟอร์มที่อยู่ที่กรอกเสร็จแล้ว -
SearchBox
จะเพิ่มช่องป้อนข้อความลงในหน้าเว็บในลักษณะเดียวกับAutocomplete
ความแตกต่างมีดังต่อไปนี้- ความแตกต่างที่สำคัญคือผลลัพธ์ที่ปรากฏในรายการที่เลือก
SearchBox
จะให้รายการการคาดคะเนเพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่กำหนดโดย Places API) รวมถึงข้อความค้นหาที่แนะนำ เช่น หากผู้ใช้ป้อน "พิซซ่าในใหม่" รายการตัวเลือกอาจมีวลี "พิซซ่าในนิวยอร์ก นิวยอร์ก" รวมถึงชื่อร้านพิซซ่าหลายแห่ง SearchBox
มีตัวเลือกน้อยกว่าAutocomplete
ในการจำกัดการค้นหา ในค่าเริ่มต้น คุณอาจให้น้ำหนักพิเศษในการค้นหาLatLngBounds
ที่ระบุ ในภายหลัง คุณจะจำกัดการค้นหาไว้เฉพาะประเทศและสถานที่บางประเภท รวมทั้งตั้งค่าขอบเขตได้ ดูข้อมูลเพิ่มเติมได้ที่ด้านล่าง
ภาพที่ 3: SearchBox นำเสนอข้อความค้นหาและการคาดคะเนสถานที่ - ความแตกต่างที่สำคัญคือผลลัพธ์ที่ปรากฏในรายการที่เลือก
- คุณสร้างออบเจ็กต์
AutocompleteService
เพื่อเรียกข้อมูลการคาดการณ์แบบเป็นโปรแกรมได้ เรียกใช้getPlacePredictions()
เพื่อเรียกข้อมูลสถานที่ที่ตรงกัน หรือเรียกใช้getQueryPredictions()
เพื่อเรียกข้อมูลสถานที่ที่ตรงกันและข้อความค้นหาที่แนะนำ หมายเหตุ:AutocompleteService
ไม่ได้เพิ่มการควบคุม UI แต่วิธีข้างต้นจะแสดงอาร์เรย์ของออบเจ็กต์การคาดการณ์แทน ออบเจ็กต์การคาดการณ์แต่ละรายการมีข้อความของการคาดการณ์ รวมถึงข้อมูลอ้างอิงและรายละเอียดของผลลัพธ์ที่ตรงกับอินพุตของผู้ใช้ โปรดดูรายละเอียดด้านล่าง
การเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติ
วิดเจ็ต Autocomplete
จะสร้างช่องป้อนข้อความในหน้าเว็บ ใส่การคาดคะเนสถานที่ในรายการตัวเลือก UI และแสดงผลรายละเอียดสถานที่ตามคำขอ getPlace()
แต่ละรายการในรายการที่เลือกจะสอดคล้องกับสถานที่เดียว (ตามที่กำหนดโดย Places API)
ตัวสร้าง Autocomplete
ใช้อาร์กิวเมนต์ 2 ตัว ดังนี้
- องค์ประกอบ HTML
input
ประเภทtext
นี่คือช่องป้อนข้อมูลที่บริการเติมข้อความอัตโนมัติ จะตรวจสอบและแนบผลลัพธ์ไว้ด้วย - อาร์กิวเมนต์
AutocompleteOptions
ที่ไม่บังคับ ซึ่งมีพร็อพเพอร์ตี้ต่อไปนี้- อาร์เรย์ของข้อมูล
fields
ที่จะรวมอยู่ในการตอบกลับPlace Details
สำหรับPlaceResult
ของผู้ใช้ที่เลือก หากไม่ได้ตั้งค่าพร็อพเพอร์ตี้หรือมีการส่ง['ALL']
เข้ามา ระบบจะแสดงผลช่องที่มีอยู่ทั้งหมดและเรียกเก็บเงินสำหรับ (ไม่แนะนำสำหรับการทำให้ใช้งานได้ในเวอร์ชันที่ใช้งานจริง) ดูรายการช่องข้อมูลได้ที่PlaceResult
- อาร์เรย์ของ
types
ที่ระบุประเภทที่ชัดเจนหรือคอลเล็กชันประเภท ตามที่ระบุไว้ในประเภทที่รองรับ ถ้าไม่มีการระบุประเภท ระบบจะแสดงผลทุกประเภท bounds
เป็นออบเจ็กต์google.maps.LatLngBounds
ที่ระบุพื้นที่ในการค้นหาสถานที่ ผลลัพธ์จะให้อคติต่อ แต่ไม่จำกัดเพียงที่ที่อยู่ภายในขอบเขตเหล่านี้strictBounds
เป็นboolean
ที่กำหนดว่า API ต้องแสดงผลเฉพาะตำแหน่งที่อยู่ภายในภูมิภาคที่กำหนดโดยbounds
เท่านั้นหรือไม่ โดย API จะไม่แสดงผลลัพธ์นอกภูมิภาคนี้แม้ว่าจะตรงกับข้อมูลที่ผู้ใช้ป้อนก็ตาม- คุณจะใช้
componentRestrictions
เพื่อจำกัดผลการค้นหาให้อยู่ในกลุ่มที่ต้องการได้ ปัจจุบันคุณใช้componentRestrictions
เพื่อกรองตามประเทศได้สูงสุด 5 ประเทศ ต้องส่งประเทศเป็นรหัสประเทศ 2 อักขระตามมาตรฐาน ISO 3166-1 Alpha-2 ต้องส่งหลายประเทศเป็นรายการรหัสประเทศหมายเหตุ: หากคุณได้รับผลลัพธ์ที่ไม่คาดคิดพร้อมกับรหัสประเทศ ให้ตรวจสอบว่าคุณใช้รหัสที่ประกอบด้วยประเทศ เขตแดนในภาวะพึ่งพิง และพื้นที่พิเศษที่สนใจทางภูมิศาสตร์ซึ่งคุณตั้งใจไว้ ดูข้อมูลรหัสได้ที่ Wikipedia: รายการรหัสประเทศ ISO 3166 หรือแพลตฟอร์มการท่องเว็บออนไลน์ ISO
- คุณใช้
placeIdOnly
เพื่อสั่งให้วิดเจ็ตAutocomplete
ดึงเฉพาะรหัสสถานที่ได้ เมื่อเรียกใช้getPlace()
ในออบเจ็กต์Autocomplete
ค่าPlaceResult
ที่พร้อมให้ใช้งานจะมีเฉพาะพร็อพเพอร์ตี้place id
,types
และname
เท่านั้น คุณสามารถใช้รหัสสถานที่ที่ส่งคืนพร้อมกับการโทรไปยังบริการสถานที่ การระบุพิกัดทางภูมิศาสตร์ เส้นทาง หรือเมทริกซ์ระยะทางได้
- อาร์เรย์ของข้อมูล
การจำกัดการคาดคะเนการเติมข้อความอัตโนมัติ
โดยค่าเริ่มต้น การเติมข้อความอัตโนมัติจะแสดงสถานที่ทุกประเภท โดยให้น้ำหนักพิเศษกับการคาดคะเนใกล้ตำแหน่งของผู้ใช้ และดึงข้อมูลฟิลด์ข้อมูลทั้งหมดที่มีอยู่สำหรับสถานที่ที่ผู้ใช้เลือก ตั้งค่าตัวเลือก เติมข้อความอัตโนมัติเพื่อแสดงการคาดคะเนที่เกี่ยวข้องมากขึ้นตาม กรณีการใช้งานของคุณ
ตั้งค่าตัวเลือกเมื่อสร้าง
เครื่องมือสร้าง Autocomplete
จะยอมรับพารามิเตอร์ AutocompleteOptions
เพื่อกำหนดข้อจำกัดเมื่อสร้างวิดเจ็ต ตัวอย่างต่อไปนี้กำหนดตัวเลือก bounds
, componentRestrictions
และ types
ให้ขอประเภทสถานที่ establishment
โดยกำหนดให้เป็นสถานที่ภายในพื้นที่ทางภูมิศาสตร์ที่ระบุและจำกัดการคาดการณ์ไว้เฉพาะสถานที่ภายในสหรัฐอเมริกาเท่านั้น การตั้งค่าตัวเลือก fields
จะระบุข้อมูลที่จะแสดงผลเกี่ยวกับสถานที่ที่เลือกของผู้ใช้
เรียกใช้ setOptions()
เพื่อเปลี่ยนค่าของตัวเลือกสำหรับวิดเจ็ตที่มีอยู่
TypeScript
const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options);
JavaScript
const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options);
ระบุช่องข้อมูล
ระบุฟิลด์ข้อมูลเพื่อหลีกเลี่ยงการเรียกเก็บเงินสำหรับ SKU ข้อมูลสถานที่ที่คุณไม่ต้องการ รวมพร็อพเพอร์ตี้ fields
ใน AutocompleteOptions
ที่ส่งไปยังเครื่องมือสร้างวิดเจ็ตดังที่แสดงในตัวอย่างก่อนหน้านี้ หรือเรียกใช้ setFields()
ในออบเจ็กต์ Autocomplete
ที่มีอยู่
autocomplete.setFields(["place_id", "geometry", "name"]);
กำหนดการให้น้ำหนักพิเศษและขอบเขตพื้นที่การค้นหาสำหรับการเติมข้อความอัตโนมัติ
คุณอาจให้น้ำหนักกับผลลัพธ์ของการเติมข้อความอัตโนมัติว่าชื่นชอบตำแหน่งหรือพื้นที่โดยประมาณด้วยวิธีต่อไปนี้
- กําหนดขอบเขตในการสร้างออบเจ็กต์
Autocomplete
- เปลี่ยนขอบเขตของ
Autocomplete
ที่มีอยู่ - กําหนดขอบเขตเป็นวิวพอร์ตของแผนที่
- จำกัดการค้นหาให้อยู่ในขอบเขตที่กำหนด
- จำกัดการค้นหาไว้เฉพาะประเทศที่ต้องการ
ตัวอย่างก่อนหน้านี้แสดงขอบเขตการตั้งค่าขณะสร้าง ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเทคนิคการให้น้ำหนักอื่นๆ
เปลี่ยนขอบเขตของการเติมข้อความอัตโนมัติที่มีอยู่
เรียกใช้ setBounds()
เพื่อเปลี่ยนพื้นที่การค้นหาบน Autocomplete
ที่มีอยู่ให้เป็นขอบเขตสี่เหลี่ยมผืนผ้า
TypeScript
const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);
JavaScript
const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);
กําหนดขอบเขตเป็นวิวพอร์ตของแผนที่
ใช้ bindTo()
เพื่อให้น้ำหนักผลลัพธ์กับวิวพอร์ตของแผนที่ แม้ว่าวิวพอร์ตจะเปลี่ยนไปก็ตาม
TypeScript
autocomplete.bindTo("bounds", map);
JavaScript
autocomplete.bindTo("bounds", map);
ใช้ unbind()
เพื่อยกเลิกการเชื่อมโยงการคาดคะเนการเติมข้อความอัตโนมัติจากวิวพอร์ตของแผนที่
TypeScript
autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
JavaScript
autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
จำกัดการค้นหาให้อยู่ในขอบเขตปัจจุบัน
ตั้งค่าตัวเลือก strictBounds
เพื่อจำกัดผลลัพธ์ให้อยู่ในขอบเขตปัจจุบัน ไม่ว่าจะอิงตามวิวพอร์ตของแผนที่หรือขอบเขตสี่เหลี่ยมผืนผ้า
autocomplete.setOptions({ strictBounds: true });
จำกัดการคาดการณ์ไว้เฉพาะบางประเทศ
ใช้ตัวเลือก componentRestrictions
หรือเรียกใช้ setComponentRestrictions()
เพื่อจำกัดการค้นหาแบบเติมข้อความอัตโนมัติสำหรับกลุ่มประเทศที่เจาะจงได้สูงสุด 5 ประเทศ
TypeScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
JavaScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
ประเภทสถานที่ข้อจํากัด
ใช้ตัวเลือก types
หรือเรียกใช้ setTypes()
เพื่อจำกัดการคาดการณ์ไว้สำหรับสถานที่บางประเภท ข้อจำกัดนี้ระบุประเภทหรือคอลเล็กชันประเภทตามที่ระบุไว้ในประเภทสถานที่
หากไม่ได้ระบุข้อจำกัด ระบบจะแสดงผลทุกประเภท
สำหรับค่าของตัวเลือก types
หรือค่าที่ส่งไปยัง setTypes()
คุณจะระบุอย่างใดอย่างหนึ่งต่อไปนี้ได้
อาร์เรย์ที่มีค่าไม่เกิน 5 ค่าจากตาราง 1 หรือตาราง 2 จากประเภทสถานที่ เช่น
types: ['hospital', 'pharmacy', 'bakery', 'country']
หรือ
autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
- ตัวกรอง 1 รายการในตารางที่ 3 จากประเภทสถานที่ คุณระบุค่าจากตาราง 3 ได้เพียงค่าเดียวเท่านั้น
คำขอจะถูกปฏิเสธในกรณีต่อไปนี้
- คุณระบุประเภทมากกว่า 5 ประเภท
- คุณระบุประเภทที่ไม่รู้จัก
- คุณผสมประเภทใดก็ได้จากตาราง 1 หรือตาราง 2 กับตัวกรองใดก็ได้จากตารางที่ 3
การสาธิตการเติมข้อความอัตโนมัติใน Places แสดงให้เห็นความแตกต่างของการคาดคะเนระหว่างสถานที่ประเภทต่างๆ
กำลังรับข้อมูลสถานที่
เมื่อผู้ใช้เลือกสถานที่จากการคาดคะเนที่แนบมากับช่องข้อความการเติมข้อความอัตโนมัติ บริการจะเริ่มเหตุการณ์ place_changed
วิธีดูรายละเอียดสถานที่
- สร้างเครื่องจัดการเหตุการณ์สำหรับเหตุการณ์
place_changed
และเรียกใช้addListener()
ในออบเจ็กต์Autocomplete
เพื่อเพิ่มตัวแฮนเดิล - เรียกใช้
Autocomplete.getPlace()
บนออบเจ็กต์Autocomplete
เพื่อเรียกออบเจ็กต์PlaceResult
ซึ่งหลังจากนั้นคุณจะใช้ข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ที่เลือกได้
โดยค่าเริ่มต้น เมื่อผู้ใช้เลือกสถานที่ การเติมข้อความอัตโนมัติจะแสดงช่องข้อมูลที่มีอยู่ทั้งหมดสําหรับสถานที่ที่เลือก และระบบจะเรียกเก็บเงินตามนั้น
ใช้ Autocomplete.setFields()
เพื่อระบุช่องข้อมูลสถานที่ที่จะแสดง อ่านเพิ่มเติมเกี่ยวกับออบเจ็กต์ PlaceResult
รวมถึงรายการฟิลด์ข้อมูลสถานที่ที่คุณขอได้ โปรดใช้ Autocomplete.setFields()
เพื่อระบุเฉพาะข้อมูลสถานที่ที่คุณจะใช้เพื่อหลีกเลี่ยงการชำระเงินสำหรับข้อมูลที่ไม่ต้องการ
พร็อพเพอร์ตี้ name
มี description
จากการคาดคะเนการเติมข้อความอัตโนมัติใน Places อ่านข้อมูลเพิ่มเติมเกี่ยวกับ description
ได้ในเอกสารประกอบของสถานที่ในการเติมข้อความอัตโนมัติ
สำหรับแบบฟอร์มที่อยู่ การรับที่อยู่ในรูปแบบที่มีโครงสร้างจะเป็นประโยชน์ หากต้องการแสดงที่อยู่แบบมีโครงสร้างสำหรับสถานที่ที่เลือก ให้โทรหา Autocomplete.setFields()
แล้วระบุช่อง address_components
ตัวอย่างต่อไปนี้ใช้การเติมข้อความอัตโนมัติเพื่อกรอกข้อมูลในช่องต่างๆ ในแบบฟอร์มที่อยู่
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
การปรับแต่งข้อความตัวยึดตำแหน่ง
โดยค่าเริ่มต้น ช่องข้อความที่สร้างโดยบริการเติมข้อความอัตโนมัติจะมีข้อความตัวยึดตำแหน่งมาตรฐาน หากต้องการแก้ไขข้อความ ให้ตั้งค่าแอตทริบิวต์ placeholder
ในองค์ประกอบ input
ดังนี้
<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">
หมายเหตุ: ระบบจะแปลข้อความตัวยึดตำแหน่งเริ่มต้นโดยอัตโนมัติ หากระบุค่าตัวยึดตำแหน่งของคุณเอง คุณต้องจัดการการแปลค่านั้นในแอปพลิเคชัน สำหรับข้อมูลเกี่ยวกับวิธีที่ Google Maps JavaScript API เลือกภาษาที่จะใช้ โปรดอ่านเอกสารประกอบใน การแปล
ดูการจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox เพื่อปรับแต่งลักษณะของวิดเจ็ต
การเพิ่มวิดเจ็ต SearchBox
SearchBox
ช่วยให้ผู้ใช้ค้นหาตามพื้นที่ทางภูมิศาสตร์แบบข้อความ เช่น "พิซซ่าในนิวยอร์ก" หรือ "ร้านรองเท้าใกล้ถนนร็อบสัน"
คุณแนบ SearchBox
ลงในช่องข้อความได้ และเมื่อมีการป้อนข้อความ บริการจะแสดงการคาดคะเนในรูปแบบของรายการแบบเลื่อนลงสำหรับตัวเลือก
SearchBox
จะให้รายการการคาดการณ์เพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่กำหนดโดย Places API) รวมถึงข้อความค้นหาที่แนะนำ เช่น หากผู้ใช้ป้อน "พิซซ่าในใหม่" รายการตัวเลือกอาจมีวลี "พิซซ่าในนิวยอร์ก นิวยอร์ก" รวมถึงชื่อร้านพิซซ่าหลายแห่ง เมื่อผู้ใช้เลือกสถานที่จากรายการ ระบบจะส่งข้อมูลเกี่ยวกับสถานที่นั้นกลับไปยังออบเจ็กต์ SearchBox ซึ่งแอปพลิเคชันของคุณสามารถดึงข้อมูลได้
ตัวสร้าง SearchBox
ใช้อาร์กิวเมนต์ 2 ตัว ดังนี้
- องค์ประกอบ HTML
input
ประเภทtext
นี่คือช่องป้อนข้อมูลที่บริการSearchBox
จะตรวจสอบและแนบผลลัพธ์ไว้ด้วย - อาร์กิวเมนต์
options
ซึ่งมีพร็อพเพอร์ตี้bounds
ได้:bounds
เป็นออบเจ็กต์google.maps.LatLngBounds
ที่ระบุพื้นที่ที่จะค้นหาสถานที่ ผลลัพธ์จะให้น้ำหนักตาม (แต่ไม่จำกัดเพียง) ตำแหน่งที่อยู่ภายในขอบเขตเหล่านี้
โค้ดต่อไปนี้ใช้พารามิเตอร์ bounds ในการให้น้ำหนักผลลัพธ์กับสถานที่ต่างๆ ภายในพื้นที่ทางภูมิศาสตร์หนึ่งๆ ที่ระบุผ่านพิกัดละติจูด/ลองจิจูด
var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631)); var input = document.getElementById('searchTextField'); var searchBox = new google.maps.places.SearchBox(input, { bounds: defaultBounds });
การเปลี่ยนพื้นที่การค้นหาสำหรับช่องค้นหา
หากต้องการเปลี่ยนพื้นที่การค้นหาสำหรับ SearchBox
ที่มีอยู่ ให้เรียกใช้ setBounds()
ในออบเจ็กต์ SearchBox
แล้วส่งออบเจ็กต์ LatLngBounds
ที่เกี่ยวข้อง
กำลังรับข้อมูลสถานที่
เมื่อผู้ใช้เลือกรายการจากการคาดการณ์ที่แนบมากับช่องค้นหา บริการจะเริ่มการทำงานของเหตุการณ์ places_changed
คุณเรียกใช้ getPlaces()
ในออบเจ็กต์ SearchBox
เพื่อเรียกข้อมูลอาร์เรย์ที่มีการคาดการณ์หลายรายการได้ ซึ่งแต่ละรายการเป็นออบเจ็กต์ PlaceResult
ดูข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์ PlaceResult
ได้ในเอกสารประกอบเกี่ยวกับ
ผลลัพธ์รายละเอียดสถานที่
TypeScript
// Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach((marker) => { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. const bounds = new google.maps.LatLngBounds(); places.forEach((place) => { if (!place.geometry || !place.geometry.location) { console.log("Returned place contains no geometry"); return; } const icon = { url: place.icon as string, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25), }; // Create a marker for each place. markers.push( new google.maps.Marker({ map, icon, title: place.name, position: place.geometry.location, }) ); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); });
JavaScript
// Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach((marker) => { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. const bounds = new google.maps.LatLngBounds(); places.forEach((place) => { if (!place.geometry || !place.geometry.location) { console.log("Returned place contains no geometry"); return; } const icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25), }; // Create a marker for each place. markers.push( new google.maps.Marker({ map, icon, title: place.name, position: place.geometry.location, }), ); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); });
ดูการจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox เพื่อปรับแต่งลักษณะของวิดเจ็ต
การดึงข้อมูลการคาดการณ์บริการเติมข้อความอัตโนมัติสถานที่แบบเป็นโปรแกรม
หากต้องการเรียกข้อมูลการคาดการณ์แบบเป็นโปรแกรม ให้ใช้คลาส
AutocompleteService
AutocompleteService
ไม่ได้เพิ่มการควบคุม UI แต่จะแสดงผลอาร์เรย์ของออบเจ็กต์การคาดการณ์แทน โดยแต่ละรายการจะมีข้อความของการคาดการณ์ ข้อมูลอ้างอิง และรายละเอียดของผลลัพธ์ที่ตรงกับอินพุตของผู้ใช้
วิธีนี้มีประโยชน์หากคุณต้องการควบคุมอินเทอร์เฟซผู้ใช้ได้มากกว่าที่ Autocomplete
และ SearchBox
มีให้ตามที่อธิบายไว้ข้างต้น
AutocompleteService
แสดงวิธีการต่อไปนี้
getPlacePredictions()
แสดงผลการคาดคะเนสถานที่ หมายเหตุ: "สถานที่" อาจเป็นสถานประกอบการ สถานที่ตั้งทางภูมิศาสตร์ หรือจุดสนใจ ที่โดดเด่นตามที่กำหนดโดย Places APIgetQueryPredictions()
จะแสดงรายการการคาดการณ์เพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่กำหนดโดย Places API) รวมถึงข้อความค้นหาที่แนะนำ เช่น หากผู้ใช้ป้อน "พิซซ่าในใหม่" รายการตัวเลือกอาจมีวลี "พิซซ่าในนิวยอร์ก นิวยอร์ก" รวมถึงชื่อร้านพิซซ่าหลายแห่ง
ทั้ง 2 วิธีข้างต้นจะแสดงผลอาร์เรย์ของออบเจ็กต์การคาดการณ์ในรูปแบบต่อไปนี้
description
เป็นการคาดการณ์ที่ตรงกันdistance_meters
คือระยะทางเป็นเมตรของสถานที่จากAutocompletionRequest.origin
ที่ระบุmatched_substrings
มีชุดสตริงย่อยในคำอธิบายซึ่งตรงกับองค์ประกอบในอินพุตของผู้ใช้ ซึ่งเป็นประโยชน์สำหรับการไฮไลต์สตริงย่อยเหล่านั้นในแอปพลิเคชัน ในหลายๆ กรณี การค้นหาจะปรากฏเป็นสตริงย่อยของช่องคำอธิบายlength
คือความยาวของสตริงย่อยoffset
คือออฟเซ็ตอักขระ ซึ่งวัดจากจุดเริ่มต้นของสตริงคำอธิบาย ซึ่งสตริงย่อยที่ตรงกันจะปรากฏขึ้น
place_id
คือตัวระบุแบบข้อความที่ระบุสถานที่โดยไม่ซ้ำกัน หากต้องการดึงข้อมูลเกี่ยวกับสถานที่ ให้ส่งตัวระบุนี้ในช่องplaceId
ของคำขอรายละเอียดสถานที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีอ้างอิงสถานที่ด้วยรหัสสถานที่terms
คืออาร์เรย์ที่มีองค์ประกอบของข้อความค้นหา สำหรับสถานที่ โดยทั่วไปองค์ประกอบแต่ละรายการจะเป็นส่วนหนึ่งของที่อยู่offset
คือออฟเซ็ตอักขระ ซึ่งวัดจากจุดเริ่มต้นของสตริงคำอธิบาย ซึ่งสตริงย่อยที่ตรงกันจะปรากฏขึ้นvalue
คือคำที่ตรงกัน
ตัวอย่างด้านล่างดำเนินการคำขอการคาดการณ์คำค้นหาสำหรับวลี "พิซซ่าใกล้" และแสดงผลลัพธ์ในรายการ
TypeScript
// This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initService(): void { const displaySuggestions = function ( predictions: google.maps.places.QueryAutocompletePrediction[] | null, status: google.maps.places.PlacesServiceStatus ) { if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) { alert(status); return; } predictions.forEach((prediction) => { const li = document.createElement("li"); li.appendChild(document.createTextNode(prediction.description)); (document.getElementById("results") as HTMLUListElement).appendChild(li); }); }; const service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions); } declare global { interface Window { initService: () => void; } } window.initService = initService;
JavaScript
// This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initService() { const displaySuggestions = function (predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) { alert(status); return; } predictions.forEach((prediction) => { const li = document.createElement("li"); li.appendChild(document.createTextNode(prediction.description)); document.getElementById("results").appendChild(li); }); }; const service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions); } window.initService = initService;
CSS
HTML
<html> <head> <title>Retrieving Autocomplete Predictions</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <p>Query suggestions for 'pizza near Syd':</p> <ul id="results"></ul> <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements --> <img class="powered-by-google" src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png" alt="Powered by Google" /> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly" defer ></script> </body> </html>
ลองใช้ตัวอย่าง
โทเค็นของเซสชัน
AutocompleteService.getPlacePredictions()
สามารถใช้โทเค็นเซสชัน (หากนำมาใช้) เพื่อจัดกลุ่มคำขอที่เติมข้อความอัตโนมัติเพื่อวัตถุประสงค์ในการเรียกเก็บเงิน โทเค็นเซสชันจะจัดกลุ่มข้อความค้นหาและเฟสการเลือกของการค้นหาแบบเติมข้อความอัตโนมัติของผู้ใช้เป็นเซสชันที่แยกจากกันเพื่อวัตถุประสงค์ในการเรียกเก็บเงิน เซสชันจะเริ่มเมื่อผู้ใช้เริ่มพิมพ์ข้อความค้นหา และสรุปเมื่อผู้ใช้เลือกสถานที่ แต่ละเซสชันอาจมีการค้นหาได้หลายรายการ ตามด้วยการเลือกสถานที่ 1 แห่ง
เมื่อเซสชันสิ้นสุดลง โทเค็นจะใช้ไม่ได้อีกต่อไป แอปต้องสร้างโทเค็นใหม่สำหรับแต่ละเซสชัน เราขอแนะนำให้ใช้โทเค็นเซสชันสำหรับ
เซสชันการเติมข้อความอัตโนมัติทั้งหมด หากละเว้นพารามิเตอร์ sessionToken
หรือใช้โทเค็นเซสชันซ้ำ ระบบจะเรียกเก็บเงินจากเซสชันเสมือนว่าไม่ได้ระบุโทเค็นเซสชันไว้ (เรียกเก็บเงินคำขอแต่ละรายการแยกกัน)
คุณสามารถใช้โทเค็นเซสชันเดียวกันนี้ในการสร้างคำขอรายละเอียดสถานที่รายการเดียวในที่ที่เกิดจากการโทรไปยัง AutocompleteService.getPlacePredictions()
ในกรณีนี้ คำขอเติมข้อความอัตโนมัติจะรวมอยู่กับคำขอรายละเอียดสถานที่ และการโทรจะเรียกเก็บเงินเป็นคำขอรายละเอียดสถานที่ตามปกติ คำขอการเติมข้อความอัตโนมัติจะไม่มีค่าใช้จ่าย
อย่าลืมส่งโทเค็นเซสชันที่ไม่ซ้ำกันให้เซสชันใหม่แต่ละเซสชัน การใช้โทเค็นเดียวกันสำหรับเซสชันที่เติมข้อความอัตโนมัติมากกว่า 1 เซสชันจะทำให้เซสชันการเติมข้อความอัตโนมัติเหล่านั้นไม่ถูกต้อง และระบบจะเรียกเก็บเงินจากคำขอการเติมข้อความอัตโนมัติทั้งหมดในเซสชันที่ไม่ถูกต้องโดยใช้การเติมข้อความอัตโนมัติต่อ SKU จากคำขอ อ่านเพิ่มเติมเกี่ยวกับโทเค็นของเซสชัน
ตัวอย่างต่อไปนี้แสดงการสร้างโทเค็นเซสชัน แล้วส่งไปใน AutocompleteService
(ละเว้นฟังก์ชัน displaySuggestions()
เพื่อความสั้นกระชับ)
// Create a new session token. var sessionToken = new google.maps.places.AutocompleteSessionToken(); // Pass the token to the autocomplete service. var autocompleteService = new google.maps.places.AutocompleteService(); autocompleteService.getPlacePredictions({ input: 'pizza near Syd', sessionToken: sessionToken }, displaySuggestions);
อย่าลืมส่งโทเค็นเซสชันที่ไม่ซ้ำกันให้เซสชันใหม่แต่ละเซสชัน การใช้โทเค็นเดียวกันสำหรับเซสชันมากกว่า 1 เซสชันจะส่งผลให้มีการเรียกเก็บเงินคำขอแต่ละรายการแยกกัน
อ่านเพิ่มเติมเกี่ยวกับโทเค็นของเซสชัน
การจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและช่องค้นหา
โดยค่าเริ่มต้น องค์ประกอบ UI ที่มาจาก Autocomplete
และ SearchBox
จะมีการจัดรูปแบบเพื่อรวมไว้ใน Google Maps คุณอาจต้องปรับการจัดรูปแบบให้เหมาะกับเว็บไซต์ของคุณเอง คลาส CSS ต่อไปนี้ใช้งานได้ ชั้นเรียนทั้งหมดที่แสดงด้านล่างใช้กับทั้งวิดเจ็ต Autocomplete
และ SearchBox
![ภาพกราฟิกของคลาส CSS สำหรับวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/images/place-autocomplete-css-diagram.png?authuser=4&hl=th)
คลาส CSS | คำอธิบาย |
---|---|
pac-container |
องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงโดยบริการเติมข้อความอัตโนมัติ รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้วิดเจ็ต Autocomplete หรือ SearchBox |
pac-icon |
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในการคาดการณ์ |
pac-item |
รายการในรายการการคาดการณ์ที่ระบุโดยวิดเจ็ต Autocomplete หรือ SearchBox |
pac-item:hover |
รายการเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปวางไว้เหนือรายการ |
pac-item-selected |
รายการเมื่อผู้ใช้เลือกผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะเป็นสมาชิกของชั้นเรียนนี้และชั้นเรียน pac-item
|
pac-item-query |
ระยะเวลาภายใน pac-item ที่เป็นส่วนหลักของการคาดการณ์ สำหรับสถานที่ตั้งทางภูมิศาสตร์ ลิงก์นี้จะมีชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อและหมายเลขถนน เช่น "10 ถนนคิง ถนน" สําหรับการค้นหาแบบข้อความ เช่น "พิซซ่าในนิวยอร์ก" จะมีข้อความเต็มของคําค้นหา โดยค่าเริ่มต้น pac-item-query จะเป็นสีดำ หากมีข้อความเพิ่มเติมใน pac-item แสดงว่าอยู่นอก pac-item-query และรับค่าสไตล์มาจาก pac-item ซึ่งจะมีสีเทาโดยค่าเริ่มต้น โดยทั่วไปข้อความเพิ่มเติมจะเป็นที่อยู่ |
pac-matched |
ส่วนของการคาดคะเนที่ส่งกลับที่ตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายใน pac-item รายการนี้ไม่จำเป็นต้องเป็นส่วนหนึ่งของ pac-item-query และอาจเป็นส่วนหนึ่งของ pac-item-query และบางส่วนในข้อความที่เหลือใน pac-item |
ใช้คอมโพเนนต์เครื่องมือเลือกสถานที่
หมายเหตุ: ตัวอย่างนี้ใช้ไลบรารีโอเพนซอร์ส โปรดดู README สำหรับการสนับสนุนและความคิดเห็นเกี่ยวกับไลบรารี
ลองใช้คอมโพเนนต์เว็บ ใช้ คอมโพเนนต์เว็บเครื่องมือเลือกสถานที่เพื่อเปิดใช้การป้อนข้อความ ซึ่งจะช่วยให้ผู้ใช้ปลายทางค้นหาที่อยู่หรือสถานที่ที่เฉพาะเจาะจงได้โดยใช้การเติมข้อความอัตโนมัติ
![GIF พร้อมช่องค้นหา ผู้ใช้เริ่มพิมพ์ที่อยู่เป็นอินพุต จากนั้นเมนูแบบเลื่อนลงที่มีที่อยู่ที่เกี่ยวข้องจะปรากฏขึ้น ผู้ใช้คลิกที่อยู่จากเมนูแบบเลื่อนลง แล้วช่องค้นหาจะเติมส่วนที่เหลือของที่อยู่](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/images/place-picker.gif?authuser=4&hl=th)
วางการเพิ่มประสิทธิภาพการเติมข้อความอัตโนมัติ
ส่วนนี้จะอธิบายแนวทางปฏิบัติที่ดีที่สุดเพื่อช่วยให้คุณได้รับประโยชน์สูงสุดจากบริการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
หลักเกณฑ์ทั่วไปมีดังต่อไปนี้
- วิธีที่รวดเร็วที่สุดในการพัฒนาอินเทอร์เฟซผู้ใช้ที่ใช้งานได้คือการใช้วิดเจ็ตเติมข้อความอัตโนมัติ Maps JavaScript API, Places SDK สำหรับวิดเจ็ตเติมข้อความอัตโนมัติของ Android หรือการควบคุม UI ของการเติมข้อความอัตโนมัติของ iOS
- พัฒนาความเข้าใจเกี่ยวกับช่องข้อมูลที่สำคัญในการเติมข้อความอัตโนมัติตั้งแต่เริ่มต้น
- ฟิลด์การให้น้ำหนักตำแหน่งและการจำกัดตำแหน่งเป็นตัวเลือกที่ไม่บังคับ แต่อาจมีผลกระทบอย่างมากต่อประสิทธิภาพของการเติมข้อความอัตโนมัติ
- ใช้การจัดการข้อผิดพลาดเพื่อให้แน่ใจว่าแอปลดระดับลงอย่างมีชั้นเชิงหาก API แสดงผลข้อผิดพลาด
- ตรวจสอบว่าแอปของคุณรองรับเมื่อแอปไม่มีตัวเลือก และเสนอวิธีดำเนินการต่อแก่ผู้ใช้
แนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพต้นทุน
การเพิ่มประสิทธิภาพต้นทุนพื้นฐาน
หากต้องการเพิ่มประสิทธิภาพการใช้บริการสถานที่อัตโนมัติ ให้ใช้มาสก์ของช่องในรายละเอียดสถานที่และวิดเจ็ตเติมข้อความอัตโนมัติเพื่อแสดงเฉพาะช่องข้อมูลสถานที่ที่คุณต้องการ
การเพิ่มประสิทธิภาพต้นทุนขั้นสูง
ลองใช้ฟีเจอร์เติมข้อความอัตโนมัติแบบเป็นโปรแกรมเพื่อเข้าถึงราคาต่อคำขอและขอผลลัพธ์ Geocoding API เกี่ยวกับสถานที่ที่เลือกแทนรายละเอียดสถานที่ การกำหนดราคาต่อคำขอที่จับคู่กับ Geocoding API จะคุ้มค่ากว่าการกำหนดราคาต่อเซสชัน (ตามเซสชัน) หากตรงกับเงื่อนไขทั้ง 2 ข้อต่อไปนี้
- หากคุณต้องการแค่ละติจูด/ลองจิจูดหรือที่อยู่ของสถานที่ที่ผู้ใช้เลือกเท่านั้น Geocoding API จะส่งข้อมูลนี้น้อยกว่าการเรียกรายละเอียดสถานที่
- หากผู้ใช้เลือกการคาดการณ์การเติมข้อความอัตโนมัติภายในคำขอการคาดการณ์การเติมข้อความอัตโนมัติโดยเฉลี่ยไม่เกิน 4 รายการ การกำหนดราคาต่อคำขออาจคุ้มค่ากว่าการกำหนดราคาแบบต่อเซสชัน
แอปพลิเคชันของคุณต้องใช้ข้อมูลอื่นนอกเหนือจากที่อยู่และละติจูด/ลองจิจูดของการคาดคะเนที่เลือกไหม
ใช่ ต้องการรายละเอียดเพิ่มเติม
ใช้การเติมข้อความอัตโนมัติเกี่ยวกับสถานที่แบบเซสชันพร้อมรายละเอียดสถานที่
เนื่องจากแอปพลิเคชันของคุณต้องการรายละเอียดสถานที่ เช่น ชื่อสถานที่ สถานะธุรกิจ หรือเวลาทำการ การใช้งาน Place Autocomplete จึงควรใช้โทเค็นเซสชัน (แบบเป็นโปรแกรม หรือมีอยู่ในวิดเจ็ต JavaScript, Android หรือ iOS) รวมเป็นค่าใช้จ่าย $0.017 ต่อเซสชัน บวกกับ SKU ข้อมูลสถานที่ที่เกี่ยวข้อง โดยขึ้นอยู่กับฟิลด์ข้อมูลสถานที่ที่คุณขอโดยขึ้นอยู่กับช่องข้อมูลสถานที่ที่คุณขอ
การใช้งานวิดเจ็ต
การจัดการเซสชันจะสร้างขึ้นในวิดเจ็ต JavaScript, Android หรือ iOS โดยอัตโนมัติ ซึ่งรวมทั้งคำขอเติมสถานที่อัตโนมัติและคำขอรายละเอียดสถานที่ในการคาดคะเนที่เลือก ตรวจสอบว่าได้ระบุพารามิเตอร์ fields
เพื่อให้มั่นใจว่าคุณขอเฉพาะช่องข้อมูลสถานที่ที่ต้องการเท่านั้น
การใช้งานแบบเป็นโปรแกรม
ใช้โทเค็นเซสชันกับคำขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ เมื่อขอรายละเอียดสถานที่เกี่ยวกับการคาดคะเนที่เลือก ให้ใส่พารามิเตอร์ต่อไปนี้
- รหัสสถานที่จากการตอบกลับจากการเติมข้อความอัตโนมัติ
- โทเค็นเซสชันที่ใช้ในคำขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
- พารามิเตอร์
fields
ที่ระบุช่องข้อมูลสถานที่ที่คุณต้องการ
ไม่ ต้องการเฉพาะที่อยู่และตำแหน่งเท่านั้น
API การระบุพิกัดทางภูมิศาสตร์อาจเป็นตัวเลือกที่มีประสิทธิภาพมากกว่ารายละเอียดสถานที่สำหรับแอปพลิเคชันของคุณ โดยขึ้นอยู่กับประสิทธิภาพการใช้งานของฟีเจอร์เติมข้อความอัตโนมัติเกี่ยวกับสถานที่ของคุณ ประสิทธิภาพในการเติมข้อความอัตโนมัติของทุกแอปพลิเคชันจะแตกต่างกันไปโดยขึ้นอยู่กับสิ่งที่ผู้ใช้ป้อน สถานที่ที่ใช้งานแอปพลิเคชัน และแนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพ ได้รับการนำไปใช้หรือไม่
เพื่อที่จะตอบคำถามต่อไปนี้ ให้วิเคราะห์จำนวนอักขระโดยเฉลี่ยที่ผู้ใช้พิมพ์ก่อนเลือกการคาดคะเนจากการเติมข้อความอัตโนมัติในแอปพลิเคชันของคุณ
ผู้ใช้เลือกการคาดคะเนการเติมข้อความอัตโนมัติในสถานที่ในคำขอไม่เกิน 4 รายการโดยเฉลี่ยหรือไม่
ได้
ติดตั้งใช้งาน Place Autocomplete แบบเป็นโปรแกรมที่ไม่มีโทเค็นเซสชันและเรียกใช้ Geocoding API ในการคาดการณ์สถานที่ที่เลือก
Geocoding API จะส่งที่อยู่และพิกัดละติจูด/ลองจิจูดในราคา $0.005 ต่อคำขอ การทำคำขอเติมข้อความอัตโนมัติ - ต่อคำขอ 4 รายการจะมีค่าใช้จ่าย $0.01132 ดังนั้น ค่าใช้จ่ายทั้งหมดของคำขอ 4 รายการบวกกับการเรียก Geocoding API เกี่ยวกับการคาดคะเนสถานที่ที่เลือกจะเป็น $0.01632 ซึ่งน้อยกว่าราคาสำหรับการเติมข้อความอัตโนมัติต่อเซสชันที่ $0.017 ต่อเซสชัน1
ลองใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพเพื่อช่วยให้ผู้ใช้ได้รับการคาดการณ์ที่ต้องการโดยใช้อักขระน้อยลง
ไม่ได้
ใช้การเติมข้อความอัตโนมัติเกี่ยวกับสถานที่แบบเซสชันพร้อมรายละเอียดสถานที่
เนื่องจากจำนวนคำขอเฉลี่ยที่คุณคาดว่าจะทำก่อนที่ผู้ใช้จะเลือกการคาดคะเนการเติมข้อความอัตโนมัติในสถานที่สูงกว่าต้นทุนต่อเซสชัน การใช้การเติมข้อความอัตโนมัติในสถานที่ควรใช้โทเค็นเซสชันสำหรับทั้งคำขอการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่และคำขอรายละเอียดสถานที่ที่เกี่ยวข้อง โดยมีค่าใช้จ่ายรวม $0.017 ต่อเซสชัน1
การใช้งานวิดเจ็ต
การจัดการเซสชันจะสร้างขึ้นในวิดเจ็ต JavaScript, Android หรือ iOS โดยอัตโนมัติ ซึ่งรวมทั้งคำขอเติมสถานที่อัตโนมัติและคำขอรายละเอียดสถานที่ในการคาดคะเนที่เลือก โปรดระบุพารามิเตอร์ fields
เพื่อให้แน่ใจว่าคุณขอเฉพาะช่องข้อมูลพื้นฐาน
การใช้งานแบบเป็นโปรแกรม
ใช้โทเค็นเซสชันกับคำขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ เมื่อขอรายละเอียดสถานที่เกี่ยวกับการคาดคะเนที่เลือก ให้ใส่พารามิเตอร์ต่อไปนี้
- รหัสสถานที่จากการตอบกลับจากการเติมข้อความอัตโนมัติ
- โทเค็นเซสชันที่ใช้ในคำขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
- พารามิเตอร์
fields
ที่ระบุช่องข้อมูลพื้นฐาน เช่น ที่อยู่และเรขาคณิต
พิจารณาเลื่อนการส่งคำขอเติมสถานที่อัตโนมัติออกไป
คุณสามารถใช้กลยุทธ์ต่างๆ เช่น ถ่วงเวลาคำขอการเติมข้อความอัตโนมัติในสถานที่จนกว่าผู้ใช้จะพิมพ์อักขระ 3 หรือ 4 ตัวแรกไป เพื่อให้แอปพลิเคชันของคุณส่งคำขอน้อยลง ตัวอย่างเช่น การส่งคำขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่หลังจากผู้ใช้พิมพ์อักขระตัวที่ 3 หมายความว่าถ้าผู้ใช้พิมพ์อักขระ 7 ตัวแล้วเลือกการคาดคะเนที่คุณส่งคำขอ API การระบุพิกัดทางภูมิศาสตร์ 1 รายการ ต้นทุนทั้งหมดจะเป็น $0.01632 (4 * $0.00283 ต่อคำขอ + การระบุพิกัดทางภูมิศาสตร์ $0.005)1
หากคำขอล่าช้าทำให้คำขอแบบเป็นโปรแกรมที่มีค่าเฉลี่ยต่ำกว่า 4 รายการ ให้ทําตามคําแนะนําในการใช้งานฟีเจอร์เติมข้อความอัตโนมัติที่ทํางานด้วย Geocoding API โปรดทราบว่าผู้ใช้ที่ล่าช้าจะมองว่าคำขอล่าช้าเป็นเวลาในการตอบสนองจากผู้ใช้ที่อาจคาดหวังว่าจะเห็นการคาดการณ์ในการกดแป้นพิมพ์ใหม่ทุกครั้ง
ลองใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพเพื่อช่วยให้ผู้ใช้ได้รับการคาดการณ์ที่ต้องการโดยใช้อักขระน้อยลง
-
โดยค่าใช้จ่ายจะแสดงเป็นสกุลเงิน USD โปรดดูข้อมูลราคาทั้งหมดในหน้าการเรียกเก็บเงินของ Google Maps Platform
แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ
หลักเกณฑ์ต่อไปนี้อธิบายวิธีเพิ่มประสิทธิภาพในการเติมข้อความอัตโนมัติ
- เพิ่มข้อจำกัดเกี่ยวกับประเทศ การให้น้ำหนักสถานที่ตั้ง และค่ากำหนดภาษา (สำหรับการติดตั้งใช้งานแบบเป็นโปรแกรม) ลงในการติดตั้งใช้งานการเติมข้อความอัตโนมัติ วิดเจ็ตไม่จําเป็นต้องใช้ค่ากําหนดภาษา เนื่องจากวิดเจ็ตจะเลือกค่ากำหนดภาษาจากเบราว์เซอร์หรืออุปกรณ์เคลื่อนที่ของผู้ใช้
- หากเติมข้อความอัตโนมัติสถานที่มาพร้อมกับแผนที่ คุณอาจให้น้ำหนักพิเศษกับตำแหน่งตามวิวพอร์ตของแผนที่ได้
- ในสถานการณ์ที่ผู้ใช้ไม่ได้เลือกการคาดคะเนจากการเติมข้อความอัตโนมัติรายการใดรายการหนึ่ง โดยทั่วไปเนื่องจากไม่มีการคาดคะเนรายการใดเป็นที่อยู่สำหรับผลลัพธ์ที่ต้องการ คุณจะนำข้อมูลเดิมของผู้ใช้เดิมมาใช้ซ้ำเพื่อให้ได้รับผลการค้นหาที่เกี่ยวข้องมากขึ้นได้ ดังนี้
- หากคุณคาดว่าผู้ใช้จะป้อนเฉพาะข้อมูลที่อยู่ ให้ใช้ข้อมูลเดิมของผู้ใช้ในการเรียก Geocoding API
- หากคุณคาดหวังให้ผู้ใช้ป้อนคำค้นหาสถานที่ที่เจาะจงตามชื่อหรือที่อยู่ ให้ใช้คำขอค้นหาสถานที่ หากต้องการผลลัพธ์ในภูมิภาคที่เจาะจงเท่านั้น ให้ใช้การให้น้ำหนักตำแหน่ง
- ผู้ใช้ที่ป้อนที่อยู่ของสถานที่ย่อยในประเทศที่การรองรับการเติมข้อความอัตโนมัติของสถานที่ย่อยไม่สมบูรณ์ เช่น เช็กเกีย เอสโตเนีย และลิทัวเนีย เช่น ที่อยู่ภาษาเช็ก "Stroupeสรุปnického 3191/17, Praha" จะให้การคาดคะเนบางส่วนในการเติมข้อความอัตโนมัติ
- ผู้ใช้ป้อนที่อยู่โดยมีคำนำหน้าส่วนต่างๆ ของถนน เช่น "23-30 ถนน 29th ควีนส์" ในนิวยอร์กซิตี้ หรือ "47-380 ถนนคาเมฮาเมฮา คาเนโอเฮ" บนเกาะคาไวในฮาวาย
ขีดจำกัดและนโยบายการใช้งาน
โควต้า
โปรดดูข้อมูลโควต้าและราคาใน เอกสารการใช้งานและการเรียกเก็บเงินสำหรับ Places API
นโยบาย
การใช้ Places Library, Maps JavaScript API ต้องเป็นไปตามนโยบายที่อธิบายไว้สำหรับ Places API