Place Autocomplete

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript บริการเว็บ

บทนำ

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

เริ่มต้นใช้งาน

ก่อนที่จะใช้ไลบรารี Places ใน Maps JavaScript API ก่อนอื่นให้เปิดใช้ Places API ใน Google Cloud Console ซึ่งเป็นโปรเจ็กต์เดียวกับที่คุณตั้งค่าสําหรับ Maps JavaScript API

วิธีดูรายการ API ที่เปิดใช้

  1. ไปที่ Google Cloud Console
  2. คลิกปุ่มเลือกโปรเจ็กต์ แล้วเลือกโปรเจ็กต์เดียวกับที่คุณตั้งค่าไว้สําหรับ Maps JavaScript API แล้วคลิกเปิด
  3. ค้นหา Places API จากรายการ API ในหน้าแดชบอร์ด
  4. หากเห็น API ในรายการ นั่นหมายความว่าทุกอย่างพร้อมแล้ว หากไม่อยู่ในรายการ API ให้เปิดใช้โดยทําดังนี้
    1. ที่ด้านบนของหน้า ให้เลือกเปิดใช้ API เพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
    2. ค้นหา Places API จากนั้นเลือกจากรายการผลการค้นหา
    3. เลือกเปิดใช้ เมื่อเสร็จสิ้นกระบวนการ Places API จะปรากฏในรายการ API ในหน้าแดชบอร์ด

กําลังโหลดไลบรารี

บริการ Places เป็นไลบรารีแบบในตัว ซึ่งแยกจากโค้ด Maps JavaScript API หลัก หากต้องการใช้ฟังก์ชันการทํางานที่อยู่ในไลบรารีนี้ ก่อนอื่นคุณต้องโหลดโดยใช้พารามิเตอร์ libraries ใน URL รองเท้าบูทของ Maps API

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

ดูข้อมูลเพิ่มเติมในภาพรวมไลบรารี

สรุปชั้นเรียน

API มีวิดเจ็ตเติมข้อความอัตโนมัติ 2 ประเภทซึ่งคุณเพิ่มผ่านคลาส Autocomplete และ SearchBox ตามลําดับได้ นอกจากนี้ คุณยังสามารถใช้คลาส AutocompleteService เพื่อดึงผลลัพธ์การเติมข้อความอัตโนมัติแบบเป็นโปรแกรม (ดูข้อมูลอ้างอิงของ Maps JavaScript API: คลาส AutocompleteService)

ด้านล่างนี้เป็นข้อมูลสรุปของชั้นเรียนที่มีอยู่

  • Autocomplete เพิ่มช่องป้อนข้อความลงในหน้าเว็บและตรวจสอบช่องดังกล่าวเพื่อหาอักขระ เมื่อผู้ใช้ป้อนข้อความ การเติมข้อความอัตโนมัติจะแสดงผลการคาดคะเนสถานที่ในรูปแบบรายการเลือกแบบเลื่อนลง เมื่อผู้ใช้เลือกสถานที่จากรายการ ระบบจะส่งข้อมูลเกี่ยวกับสถานที่นั้นกลับไปที่ออบเจ็กต์ที่เติมข้อความอัตโนมัติซึ่งแอปพลิเคชันจะเรียกข้อมูลได้ โปรดดูรายละเอียดด้านล่าง
    ช่องข้อความเติมข้อความอัตโนมัติและรายการการคาดคะเนการคาดคะเนที่เลือกเมื่อผู้ใช้ป้อนคําค้นหา
    ภาพที่ 1: ช่องข้อความและรายการที่เติมข้อมูลอัตโนมัติ
    แบบฟอร์มที่อยู่ที่กรอกสมบูรณ์แล้ว
    ภาพที่ 2: แบบฟอร์มที่อยู่ที่กรอกเสร็จสมบูรณ์แล้ว
  • SearchBox เพิ่มช่องป้อนข้อความลงในหน้าเว็บในลักษณะเดียวกันกับ Autocomplete โดยมีความแตกต่างดังต่อไปนี้
    • ความแตกต่างที่สําคัญจะอยู่ในผลลัพธ์ที่ปรากฏในรายการตัวเลือก SearchBox ให้รายการการคาดคะเนเพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่ Places API กําหนด) และข้อความค้นหาที่แนะนํา ตัวอย่างเช่น หากผู้ใช้ป้อน 'พิซซ่าใน new' รายการตัวเลือกอาจประกอบด้วยวลี 'พิซซ่าในนิวยอร์ก นิวยอร์ก' และชื่อร้านพิซซ่าต่างๆ
    • SearchBox มีตัวเลือกน้อยกว่า Autocomplete สําหรับการจํากัดการค้นหา หากเป็นเช่นนี้ คุณอาจเลือกการให้น้ําหนักพิเศษในการค้นหามากกว่า LatLngBounds ก็ได้ ในวันหลัง คุณจํากัดการค้นหาไว้เฉพาะบางประเทศและประเภทสถานที่ที่ต้องการ รวมถึงการตั้งค่าขอบเขตได้ ดูข้อมูลเพิ่มเติมได้ในด้านล่าง
    แบบฟอร์มที่อยู่ที่กรอกสมบูรณ์แล้ว
    รูปที่ 3: SearchBox นําเสนอข้อความค้นหาและการคาดคะเนสถานที่
    ดูรายละเอียดได้ด้านล่าง
  • คุณจะสร้างออบเจ็กต์ AutocompleteService เพื่อดึงการคาดการณ์โดยใช้โปรแกรมได้ โทรหา getPlacePredictions() เพื่อเรียกสถานที่ที่ตรงกัน หรือโทรหา getQueryPredictions() เพื่อเรียกสถานที่ที่ตรงกันและข้อความค้นหาที่แนะนํา หมายเหตุ: AutocompleteService ไม่ได้เพิ่มตัวควบคุม UI ใดๆ เมธอดข้างต้นจะส่งคืนอาร์เรย์ออบเจ็กต์การคาดการณ์แทน ออบเจ็กต์การคาดการณ์แต่ละรายการจะมีข้อความของการคาดการณ์ รวมถึงข้อมูลการอ้างอิงและรายละเอียดว่าผลลัพธ์ตรงกับอินพุตของผู้ใช้อย่างไร ดูรายละเอียดได้ด้านล่าง

การเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติ

วิดเจ็ต Autocomplete จะสร้างช่องป้อนข้อความบนหน้าเว็บ ส่งการคาดการณ์เกี่ยวกับสถานที่ในรายการเลือก UI และแสดงผลรายละเอียดสถานที่ตอบกลับคําขอ getPlace() ข้อมูลแต่ละรายการใน เลือกรายการจะสอดคล้องกับสถานที่เดียว (ตามที่ Places API กําหนด)

ตัวสร้าง Autocomplete ประกอบด้วย 2 อาร์กิวเมนต์ดังนี้

  • องค์ประกอบ input ของ HTML ประเภท text นี่คือช่องป้อนข้อมูลที่บริการเติมข้อความอัตโนมัติจะตรวจสอบและแนบผลลัพธ์
  • อาร์กิวเมนต์ AutocompleteOptions ที่ไม่บังคับ ซึ่งจะมีพร็อพเพอร์ตี้ต่อไปนี้
    • อาร์เรย์ของข้อมูลที่ fields จะรวมอยู่ในการตอบกลับ Place Details ของผู้ใช้ PlaceResult ที่เลือก หากไม่ได้ตั้งค่าพร็อพเพอร์ตี้หรือมีการส่ง ['ALL'] ไป ระบบจะแสดงผลช่องข้อมูลที่พร้อมใช้งานทั้งหมดและเรียกเก็บเงินสําหรับ (ซึ่งไม่แนะนําสําหรับการติดตั้งใช้งานเวอร์ชันที่ใช้งานจริง) โปรดดูรายการช่องในหัวข้อ PlaceResult
    • อาร์เรย์ของ types ที่ระบุประเภทหรือคอลเล็กชันประเภทที่ไม่เหมาะสม ดังที่ระบุไว้ในประเภทที่รองรับ หากไม่ได้ระบุประเภทใด ระบบจะแสดงผลทุกประเภท
    • bounds คือออบเจ็กต์ google.maps.LatLngBounds ที่ระบุพื้นที่สําหรับค้นหาสถานที่ ให้ผลตรวจมีการให้น้ําหนักพิเศษกับ สถานที่ที่อยู่ภายในขอบเขตเหล่านี้
    • strictBounds คือ boolean ที่กําหนดว่า API ต้องแสดงเฉพาะตําแหน่งที่อยู่ในภูมิภาคซึ่งกําหนดโดย bounds เท่านั้นหรือไม่ API จะไม่แสดงผลการค้นหานอกภูมิภาคนี้แม้ว่าจะตรงกับอินพุตของผู้ใช้
    • คุณใช้ componentRestrictions เพื่อจํากัดผลลัพธ์ ไว้เฉพาะกลุ่มได้ ปัจจุบันคุณจะใช้componentRestrictionsเพื่อกรองตามประเทศได้สูงสุด 5 ประเทศ ประเทศต้องส่งผ่านในรูปแบบรหัสประเทศตามมาตรฐาน ISO 3166-1 Alpha-2 หลายประเทศจะต้องส่งผ่านเป็นรายการรหัสประเทศ

      หมายเหตุ: หากคุณได้รับผลการค้นหาที่ไม่คาดคิดพร้อมรหัสประเทศ ให้ตรวจสอบว่าคุณกําลังใช้รหัสที่มีประเทศ เขตแดนอ้างอิง และพื้นที่เฉพาะที่สนใจทางภูมิศาสตร์ ดูข้อมูลรหัสได้ที่ Wikipedia: รายการรหัสประเทศตามมาตรฐาน ISO 3166 หรือแพลตฟอร์มการเรียกดูออนไลน์ของ ISO

    • placeIdOnly ใช้เพื่อสั่งให้วิดเจ็ต Autocomplete ดึงข้อมูลเฉพาะรหัสสถานที่ได้ เมื่อเรียกใช้ getPlace() ในออบเจ็กต์ Autocomplete PlaceResult ที่มีจะมีการกําหนดพร็อพเพอร์ตี้ place id, types และ name เท่านั้น คุณใช้รหัสสถานที่ที่แสดงผลกับการเรียกใช้บริการ Places, การหาพิกัดทางภูมิศาสตร์, เส้นทาง หรือเมทริกซ์ระยะทางได้

การคาดคะเนการเติมข้อความอัตโนมัติในการควบคุม

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

ตั้งค่าตัวเลือกระหว่างก่อสร้าง

เครื่องมือสร้าง 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,
  types: ["establishment"],
};

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,
  types: ["establishment"],
};
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 กับตัวกรองจากตาราง 3

การสาธิตการเติมข้อความอัตโนมัติในสถานที่จะแสดงความแตกต่างในการคาดคะเนระหว่างสถานที่ประเภทต่างๆ

ไปที่การสาธิต

กําลังรับข้อมูลสถานที่

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

  1. สร้างเครื่องจัดการเหตุการณ์สําหรับเหตุการณ์ place_changed และเรียก addListener() ในออบเจ็กต์ Autocomplete เพื่อเพิ่มเครื่องจัดการ
  2. เรียก 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 ให้รายการการคาดคะเนเพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่ Places API กําหนด) และข้อความค้นหาที่แนะนํา ตัวอย่างเช่น หากผู้ใช้ป้อน 'พิซซ่าในใหม่' รายการตัวเลือกอาจมีวลี 'พิซซ่าในนิวยอร์ก นิวยอร์ก' และชื่อร้านพิซซ่าต่างๆ เมื่อผู้ใช้เลือกสถานที่จากรายการ ระบบจะส่งข้อมูลเกี่ยวกับสถานที่นั้นกลับไปที่ออบเจ็กต์ SearchBox และแอปพลิเคชันจะเรียกข้อมูลได้

ตัวสร้าง SearchBox ประกอบด้วย 2 อาร์กิวเมนต์ดังนี้

  • องค์ประกอบ input ของ HTML ประเภท text นี่คือช่องอินพุตที่บริการ SearchBox จะตรวจสอบและแนบผลลัพธ์ไป
  • อาร์กิวเมนต์ options ซึ่งอาจมีพร็อพเพอร์ตี้ bounds: bounds เป็นออบเจ็กต์ google.maps.LatLngBounds ที่ระบุพื้นที่สําหรับค้นหาสถานที่ ผลการค้นหานี้มีความลําเอียงในแต่ไม่จํากัดเฉพาะสถานที่ที่อยู่ภายในขอบเขตเหล่านี้

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

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

หากต้องการเปลี่ยนพื้นที่การค้นหาสําหรับ 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);
});

ดูตัวอย่าง

ดูการจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและช่องค้นหา เพื่อปรับแต่งรูปลักษณ์ของวิดเจ็ต

การดึงข้อมูลการคาดการณ์บริการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่โดยใช้โปรแกรม

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

AutocompleteService จะแสดงวิธีการต่อไปนี้

  • getPlacePredictions() แสดงผลการคาดการณ์สถานที่ หมายเหตุ: A 'place' อาจเป็นสถานประกอบการ สถานที่ตั้งทางภูมิศาสตร์ หรือจุดสนใจที่โดดเด่นตามที่ Places API กําหนด
  • getQueryPredictions() แสดงผลรายการการคาดคะเนเพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่ Places API กําหนด) และข้อความค้นหาที่แนะนํา ตัวอย่างเช่น หากผู้ใช้ป้อน 'พิซซ่าใน new' รายการตัวเลือกอาจมีวลี 'พิซซ่าในนิวยอร์ก นิวยอร์ก' และชื่อร้านพิซซ่าต่างๆ

ทั้งสองวิธีข้างต้นนี้จะแสดงผลอาร์เรย์ของออบเจ็กต์การคาดการณ์ในรูปแบบต่อไปนี้

  • description เป็นการคาดการณ์ที่ตรงกัน
  • distance_meters คือระยะทางเป็นเมตรของสถานที่ซึ่งมีจาก AutocompletionRequest.origin ที่ระบุ
  • matched_substrings มีชุดสตริงย่อยในคําอธิบายที่ตรงกับองค์ประกอบในอินพุตของผู้ใช้ ซึ่งเป็นประโยชน์สําหรับการไฮไลต์สตริงย่อยเหล่านั้นในแอปพลิเคชัน ในหลายๆ กรณี คําค้นหาจะปรากฏเป็นสตริงย่อยของช่องคําอธิบาย
    • length คือความยาวของสตริงย่อย
    • offset คือออฟเซ็ตอักขระซึ่งวัดจากจุดเริ่มต้นของสตริงคําอธิบายที่แสดงสตริงย่อยที่ตรงกัน
  • place_id คือตัวระบุข้อความที่ระบุสถานที่แบบไม่ซ้ํากัน หากต้องการเรียกข้อมูลเกี่ยวกับสถานที่ ให้ส่งตัวระบุนี้ในช่อง placeId ของคําขอรายละเอียดสถานที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีอ้างอิงสถานที่ด้วยรหัสสถานที่
  • terms คืออาร์เรย์ที่มีองค์ประกอบของคําค้นหา สําหรับสถานที่ แต่ละองค์ประกอบมักจะเป็นส่วนของที่อยู่
    • offset คือออฟเซ็ตอักขระซึ่งวัดจากจุดเริ่มต้นของสตริงคําอธิบายที่แสดงสตริงย่อยที่ตรงกัน
    • value คือคําที่ตรงกัน

ตัวอย่างด้านล่างใช้คําขอการคาดคะเนการค้นหาสําหรับวลี 'พิซซ่าใกล้&#39 และแสดงผลลัพธ์ในรายการ

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <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
คลาส CSS สําหรับวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox
คลาส CSS คำอธิบาย
pac-container องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงผลโดยบริการเติมข้อความอัตโนมัติของสถานที่ รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้วิดเจ็ต Autocomplete หรือ SearchBox
pac-icon ไอคอนที่แสดงทางซ้ายของแต่ละรายการในรายการการคาดการณ์
pac-item รายการในรายการการคาดคะเนที่ได้จากวิดเจ็ต Autocomplete หรือ SearchBox
pac-item:hover รายการเมื่อผู้ใช้วางเมาส์เหนือเคอร์เซอร์เหนือรายการนั้น
pac-item-selected รายการเมื่อผู้ใช้เลือกผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะเป็นสมาชิกของชั้นเรียนนี้และ pac-item ชั้นเรียน
pac-item-query ระยะเวลาภายใน pac-item ที่เป็นส่วนสําคัญของการคาดการณ์ สําหรับสถานที่ตั้งทางภูมิศาสตร์ สถานที่นี้จะแสดงชื่อสถานที่ เช่น ##39;Sydney' หรือชื่อถนนและหมายเลข เช่น '10 King Street' สําหรับการค้นหาแบบข้อความ เช่น 'พิซซ่าในนิวยอร์ก' จะมีข้อความแบบเต็มของข้อความค้นหา สี pac-item-query จะเป็นสีดําโดยค่าเริ่มต้น หากมีข้อความอื่นๆ ใน pac-item ข้อความนั้นอยู่นอก pac-item-query และได้รับการจัดรูปแบบมาจาก pac-item ซึ่งจะกลายเป็นสีเทาโดยค่าเริ่มต้น ซึ่งโดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
pac-matched ส่วนของการคาดการณ์ที่แสดงซึ่งตรงกับอินพุตของผู้ใช้ โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นข้อความตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายใน pac-item ข้อความไม่จําเป็นต้องเป็นส่วนหนึ่งของ pac-item-query และอาจเป็นส่วนหนึ่งของ pac-item-query และเป็นส่วนหนึ่งของข้อความที่อยู่ใน pac-item

การเพิ่มประสิทธิภาพการเติมข้อความอัตโนมัติภายในสถานที่

ส่วนนี้จะอธิบายแนวทางปฏิบัติแนะนําในการใช้ประโยชน์สูงสุดจากบริการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่

หลักเกณฑ์ทั่วไปบางส่วนมีดังนี้

  • วิธีที่รวดเร็วที่สุดในการพัฒนาอินเทอร์เฟซผู้ใช้ที่ใช้งานได้คือการใช้วิดเจ็ตการเติมข้อความอัตโนมัติของ Maps JavaScript API, Places Android Auto วิดเจ็ตการเติมข้อความอัตโนมัติ หรือการควบคุม UI ของการเติมข้อความอัตโนมัติใน Places SDK สําหรับ iOS
  • พัฒนาการทําความเข้าใจช่องข้อมูลการเติมข้อความอัตโนมัติที่สําคัญในตอนต้น
  • ช่องการให้น้ําหนักตําแหน่งและข้อจํากัดด้านตําแหน่งเป็นตัวเลือกที่ไม่บังคับ แต่อาจมีผลกระทบอย่างมากต่อประสิทธิภาพการเติมข้อความอัตโนมัติ
  • ใช้การจัดการข้อผิดพลาดเพื่อให้แน่ใจว่าแอปของคุณมีประสิทธิภาพลดลงหาก API แสดงผลข้อผิดพลาด
  • ตรวจสอบว่าแอปรองรับเมื่อไม่มีการเลือกและเสนอวิธีดําเนินการต่อแก่ผู้ใช้

แนวทางปฏิบัติแนะนําสําหรับการเพิ่มประสิทธิภาพต้นทุน

การเพิ่มประสิทธิภาพต้นทุนพื้นฐาน

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

การเพิ่มประสิทธิภาพต้นทุนขั้นสูง

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

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

แอปพลิเคชันต้องการข้อมูลอื่นนอกเหนือจากที่อยู่และละติจูด/ลองจิจูดของการคาดการณ์ที่เลือกไหม

ใช่ ต้องการรายละเอียดเพิ่มเติม

ใช้ฟีเจอร์เติมข้อความอัตโนมัติโดยอิงตามเซสชันพร้อมรายละเอียดสถานที่
เนื่องจากแอปพลิเคชันต้องใช้รายละเอียดสถานที่ เช่น ชื่อสถานที่ สถานะธุรกิจ หรือเวลาทําการ การใช้งานการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่จึงควรใช้โทเค็นเซสชัน (แบบเป็นโปรแกรมหรือในวิดเจ็ต JavaScript, Android หรือ iOS) รวมเป็นค่าใช้จ่ายทั้งหมด $0.017 ต่อเซสชัน รวมทั้ง SKU ข้อมูลสถานที่ โดยขึ้นอยู่กับช่องข้อมูลสถานที่ 1}

การใช้งานวิดเจ็ต
การจัดการเซสชันสร้างขึ้นโดยอัตโนมัติในวิดเจ็ต JavaScript, Android หรือ iOS ซึ่งรวมทั้งคําขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่และคําขอรายละเอียดสถานที่ในการคาดคะเนที่เลือก โปรดระบุพารามิเตอร์ fields เพื่อให้แน่ใจว่าคุณขอช่องข้อมูลสถานที่ที่ต้องการเท่านั้น

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

  1. รหัสสถานที่จากการตอบกลับการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
  2. โทเค็นเซสชันที่ใช้ในคําขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
  3. พารามิเตอร์ fields ที่ระบุช่องข้อมูลสถานที่ที่คุณต้องการ

ไม่ ต้องการที่อยู่และตําแหน่งเท่านั้น

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

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

โดยเฉลี่ยแล้ว ผู้ใช้เลือกการคาดคะเนการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ในคําขอไม่เกิน 4 รายการหรือไม่

ใช่

ใช้การเติมข้อความอัตโนมัติเกี่ยวกับสถานที่แบบเป็นโปรแกรมโดยไม่มีโทเค็นเซสชันและเรียกใช้ Geocoding API ในการคาดการณ์สถานที่ที่เลือก
Geocoding API จะส่งที่อยู่และพิกัดละติจูด/ลองจิจูดในราคา $0.005 ต่อคําขอ การขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ - คําขอ 4 ครั้งมีค่าใช้จ่าย $0.01132 ดังนั้นค่าใช้จ่ายรวมของ 4 คําขอและ API การระบุพิกัดทางภูมิศาสตร์เกี่ยวกับการคาดคะเนสถานที่ที่เลือกจะเท่ากับ 0.30 บาท 3.00 ซึ่งน้อยกว่าราคาต่อการเติมข้อความอัตโนมัติต่อเซสชันที่ 2 บาทต่อ1

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

ไม่ได้

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

การใช้งานวิดเจ็ต
การจัดการเซสชันสร้างขึ้นโดยอัตโนมัติในวิดเจ็ต JavaScript, Android หรือ iOS ซึ่งรวมทั้งคําขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่และคําขอรายละเอียดสถานที่ในการคาดคะเนที่เลือก โปรดระบุพารามิเตอร์ fields เพื่อให้แน่ใจว่าคุณกําลังขอช่องข้อมูลพื้นฐานเท่านั้น

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

  1. รหัสสถานที่จากการตอบกลับการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
  2. โทเค็นเซสชันที่ใช้ในคําขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
  3. พารามิเตอร์ fields ที่ระบุช่องข้อมูลพื้นฐาน เช่น ที่อยู่และเรขาคณิต

พิจารณาการชะลอคําขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่
คุณใช้กลยุทธ์ต่างๆ ได้ เช่น เลื่อนคําขอเติมข้อความอัตโนมัติเกี่ยวกับสถานที่จนกว่าผู้ใช้จะพิมพ์อักขระ 3 หรือ 4 ตัวแรกเพื่อไม่ให้แอปพลิเคชันสร้างคําขอน้อยลง ตัวอย่างเช่น การส่งคําขอเติมข้อความอัตโนมัติสําหรับอักขระแต่ละตัวหลังจากที่ผู้ใช้พิมพ์อักขระตัวที่ 3 หมายความว่าหากผู้ใช้พิมพ์ 7 อักขระ แล้วเลือกการคาดคะเนว่าคุณสร้างคําขอ API การเข้ารหัสภูมิศาสตร์ 1 รายการ ค่าใช้จ่ายรวมก็จะเป็น 12 บาท (0.00283 คําขอต่อคําขออัตโนมัติ + 3.005 บาท)1

หากคําขอที่ล่าช้าอาจทําให้คําขอแบบเป็นโปรแกรมเฉลี่ยต่ํากว่า 4 รายการ ให้ทําตามแนวทางสําหรับการใช้งาน Autocomplete Place autocomplete with Geocoding API โปรดทราบว่าผู้ใช้ที่ต้องการคําขออาจจะเห็นความล่าช้าในการตอบสนองทุกครั้งที่กดแป้นพิมพ์

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


  1. ค่าใช้จ่ายที่แสดงในรายการนี้เป็นสกุลเงินดอลลาร์สหรัฐฯ โปรดดูข้อมูลราคาแบบเต็มในหน้าการเรียกเก็บเงินของ Google Maps Platform

แนวทางปฏิบัติแนะนําสําหรับประสิทธิภาพ

หลักเกณฑ์ต่อไปนี้อธิบายวิธีเพิ่มประสิทธิภาพการเติมข้อความอัตโนมัติของสถานที่

  • เพิ่มข้อจํากัดด้านประเทศ การให้น้ําหนักตําแหน่ง และค่ากําหนด (สําหรับการติดตั้งใช้งานแบบเป็นโปรแกรม) ให้กับการติดตั้งใช้งานการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ ค่ากําหนดภาษาไม่จําเป็นต้องใช้วิดเจ็ตเนื่องจากเลือกค่ากําหนดภาษาจากเบราว์เซอร์หรืออุปกรณ์เคลื่อนที่ของผู้ใช้
  • หากการเติมข้อความอัตโนมัติของสถานที่มีแผนที่รวมอยู่ด้วย คุณสามารถจัดตําแหน่งการให้น้ําหนักตามวิวพอร์ตของแผนที่ได้
  • ในสถานการณ์ที่ผู้ใช้ไม่ได้เลือกการคาดคะเนการเติมข้อความอัตโนมัติ โดยทั่วไปแล้วเป็นเพราะการคาดคะเนดังกล่าวไม่ใช่ที่อยู่ผลลัพธ์ที่ต้องการ คุณจึงนําอินพุตของผู้ใช้เดิมมาใช้ซ้ําได้เพื่อให้ได้ผลลัพธ์ที่เกี่ยวข้องมากขึ้น ดังนี้
    • หากคุณคาดว่าผู้ใช้จะป้อนเฉพาะข้อมูลที่อยู่ ให้ใช้อินพุตเดิมของผู้ใช้ซ้ําในการเรียก Geocoding API
    • หากคุณคาดว่าผู้ใช้จะป้อนการค้นหาสถานที่ตามชื่อหรือที่อยู่ ให้ใช้ค้นหาสถานที่ หากผลลัพธ์คาดหวังในภูมิภาคใดภูมิภาคหนึ่งโดยเฉพาะ ให้ใช้การให้น้ําหนักตําแหน่ง
    สถานการณ์อื่นๆ เมื่อกลับไปใช้ Geocoding API ได้ดีที่สุด ได้แก่
    • ผู้ใช้ป้อนที่อยู่ย่อยในประเทศอื่นๆ นอกเหนือจากออสเตรเลีย นิวซีแลนด์ หรือแคนาดา เช่น ที่อยู่ของสหรัฐอเมริกา "123 Bowdoin St #456, Boston MA, USA" การเติมข้อความอัตโนมัติไม่รองรับ (การเติมข้อความอัตโนมัติรองรับที่อยู่ย่อยเฉพาะในออสเตรเลีย นิวซีแลนด์ และแคนาดาเท่านั้น รูปแบบที่อยู่ที่รองรับใน 3 ประเทศเหล่านี้ ได้แก่ "9/321 Pitt Street, Sydney, New South Wales, Australia" หรือ "14/19 Langana Avenue, Browns Bay, Auckland, New Zealand" หรือ "145-112 Renfrew Dr, Markham, Ontario, Canada")
    • ผู้ใช้ป้อนที่อยู่ที่มีส่วนถนน เช่น "quot;23-30 29th St. Queens" ในนิวยอร์กซิตี้ หรือ "47-380 Kamehameha Hwy, Kaneohe" บนเกาะคาไวใน Hawai'i

ขีดจํากัดและนโยบายการใช้งาน

โควต้า

สําหรับข้อมูลเกี่ยวกับโควต้าและราคา โปรดดู เอกสารประกอบเกี่ยวกับการใช้งานและการเรียกเก็บเงินสําหรับ Places API

นโยบาย

การใช้งาน Places ใน Maps API ของ Maps JavaScript ต้องเป็นไปตามนโยบายที่อธิบายสําหรับ Places API