ใช้ Places UI Kit สำหรับผู้ใช้ Places API เดิม

ดูวิธีย้ายข้อมูลการติดตั้งใช้งาน Places API หรือ Place Class ที่มีอยู่ไปยังคอมโพเนนต์ Places UI Kit

คู่มือนี้มีไว้สำหรับใคร

คู่มือนี้มีไว้สำหรับนักพัฒนาแอปที่ติดตั้งใช้งานโดยใช้ Places API อยู่แล้วและสนใจอัปเดตโค้ดเพื่อใช้ Places UI Kit คู่มือนี้จะมีประโยชน์มากที่สุดหากคุณทำสิ่งต่อไปนี้อยู่แล้ว

• ส่งคำขอ HTTP ไปยังปลายทาง Places API (ใหม่หรือเดิม)
• ใช้ Place Class ภายใน Maps JavaScript API
• จัดการการตอบกลับจาก API เพื่อแสดงข้อมูลสถานที่ใน UI ของเว็บแอปพลิเคชัน

ข้อกำหนดเบื้องต้น

เปิดใช้ Places UI Kit ในโปรเจ็กต์ Google Cloud คุณสามารถใช้คีย์ API ที่มีอยู่ต่อไปหรือสร้างคีย์ใหม่สำหรับ Places UI Kit ก็ได้ ดูข้อมูลเพิ่มเติม รวมถึงการจำกัดคีย์ได้ที่ใช้คีย์ API

อัปเดตการโหลด Maps JavaScript API

Places UI Kit ต้องใช้เมธอดการนำเข้าไลบรารีแบบไดนามิกในการโหลด Maps JavaScript API หากคุณใช้แท็กการโหลดสคริปต์โดยตรง คุณต้องอัปเดตแท็กนี้

เมื่ออัปเดตสคริปต์การโหลดสำหรับ Maps JavaScript API แล้ว นำเข้า ไลบรารี ที่จำเป็น เพื่อใช้ Places UI Kit

ติดตั้งใช้งานองค์ประกอบรายละเอียดสถานที่

องค์ประกอบรายละเอียดสถานที่ และ องค์ประกอบรายละเอียดสถานที่แบบย่อ เป็นองค์ประกอบ HTML ที่แสดงรายละเอียดของสถานที่

การติดตั้งใช้งานปัจจุบัน

• คุณทำการเรียกรายละเอียดสถานที่โดยใช้คำขอ HTTP หรือใช้ Place Class ของ JavaScript API
• คุณแยกวิเคราะห์การตอบกลับจาก API และแสดงรายละเอียดสถานที่โดยใช้ HTML และ CSS

การย้ายข้อมูลไปยังองค์ประกอบรายละเอียดสถานที่

แก้ไขโครงสร้าง HTML

ระบุคอนเทนเนอร์ HTML ที่แสดงรายละเอียดสถานที่ แทนที่องค์ประกอบ HTML ที่กำหนดเอง (div, span สำหรับชื่อ แอดเดรส รูปภาพ ฯลฯ) ด้วย HTML ขององค์ประกอบรายละเอียดสถานที่

มีองค์ประกอบให้เลือก 2 รายการ ได้แก่

• องค์ประกอบรายละเอียดสถานที่แบบย่อ
• องค์ประกอบรายละเอียดสถานที่

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

HTML ที่มีอยู่อาจมีลักษณะดังนี้

<div id="my-place-details-container">
    <h2 id="place-name"></h2>
    <p id="place-address"></p>
    <img id="place-photo" src="" alt="Place photo">
    <!-- ... more custom elements -->
</div>

ตัวอย่าง HTML ใหม่ที่ระบุเนื้อหาที่จะแสดงอย่างชัดเจน เนื้อหา

<gmp-place-details-compact orientation="horizontal" truncation-preferred style="display: none;">
    <gmp-place-details-place-request></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
    </gmp-place-content-config>
</gmp-place-details-compact>

ปรับตรรกะ JavaScript

ตรรกะที่มีอยู่

ตรรกะที่มีอยู่อาจเกี่ยวข้องกับสิ่งต่อไปนี้

• การดึงข้อมูลรหัสสถานที่
• การใช้ PlacesService().getDetails() หรือการเรียกใช้บริการเว็บ
• การระบุอาร์เรย์ของช่อง (สำหรับ JS API) หรือ FieldMask (สำหรับบริการเว็บ) เพื่อขอข้อมูลที่เฉพาะเจาะจง
• ในการแก้ปัญหา Callback ให้เลือกองค์ประกอบ HTML ด้วยตนเองและป้อนข้อมูลที่ได้รับ

ตัวอย่างต่อไปนี้แสดงวิธีที่คุณอาจติดตั้งใช้งานรายละเอียดสถานที่

async function getPlaceDetails(placeId) {
    const { Place } = await google.maps.importLibrary('places');
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: placeId
    });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}

หมายเหตุ: ตรรกะของคุณอาจมีลักษณะแตกต่างออกไปหากคุณใช้การเรียก REST API หรือ ไลบรารี JavaScript เดิม

ตรรกะใหม่

ตรรกะใหม่จะเกี่ยวข้องกับสิ่งต่อไปนี้

• ดึงข้อมูลรหัสสถานที่หรือออบเจ็กต์สถานที่
• รับการอ้างอิงไปยังองค์ประกอบ <gmp-place-details-place-request>
• ส่งรหัสสถานที่หรือออบเจ็กต์สถานที่ไปยังพร็อพเพอร์ตี้สถานที่ในองค์ประกอบ <gmp-place-details-place-request>

ตัวอย่างต่อไปนี้แสดงวิธีติดตั้งใช้งานชุด UI รายละเอียดสถานที่ในตรรกะ JavaScript รับการอ้างอิงไปยังองค์ประกอบรายละเอียดสถานที่ หากมีองค์ประกอบนี้อยู่ ให้รับการอ้างอิงไปยังองค์ประกอบคำขอสถานที่สำหรับรายละเอียดสถานที่ แล้วตั้งค่าพร็อพเพอร์ตี้สถานที่โดยใช้รหัสสถานที่ ในโค้ด HTML ตัวอย่างด้านบน สไตล์ขององค์ประกอบรายละเอียดสถานที่ตั้งค่าเป็น display: none ซึ่งจะอัปเดตเป็น display: block

function displayPlaceDetailsWithUIKit(placeId) {
  const placeDetailsElement = document.querySelector('gmp-place-details-compact');
  if (placeDetailsElement) {
    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
    // Configure the element with the Place ID
    placeDetailsRequest.place = placeId
    placeDetailsElement.style.display = 'block';
    console.log("PlaceDetailsElement configured for place:", placeId);
  } else {
    console.error("PlaceDetailsElement not found in the DOM.");
  }
}

// Example usage:
const placeId = 'ChIJC8HakaIRkFQRiOgkgdHmqkk';
displayPlaceDetailsWithUIKit(placeId);

ติดตั้งใช้งานองค์ประกอบการค้นหาสถานที่

องค์ประกอบการค้นหาสถานที่ เป็นองค์ประกอบ HTML ที่แสดงผลการค้นหาสถานที่ในรายการ

การติดตั้งใช้งานปัจจุบัน

• คุณทำการค้นหาข้อความหรือการค้นหาในบริเวณใกล้เคียงโดยใช้คำขอ HTTP หรือใช้ Place Class ของ JavaScript API
• คุณระบุพารามิเตอร์การค้นหา ข้อจำกัดหรือความเอนเอียงของสถานที่ ประเภท และช่องที่ขอโดยใช้ FieldMask
• คุณแยกวิเคราะห์การตอบกลับจาก API วนซ้ำในอาร์เรย์ของสถานที่ และสร้างรายการ HTML ด้วยตนเอง

การย้ายข้อมูลไปยังองค์ประกอบการค้นหาสถานที่

แก้ไขโครงสร้าง HTML

ระบุคอนเทนเนอร์ HTML ที่คุณแสดงรายการสถานที่ แทนที่องค์ประกอบ HTML ที่กำหนดเอง (div, span สำหรับชื่อ ที่อยู่ ฯลฯ) ด้วยองค์ประกอบ HTML ขององค์ประกอบการค้นหาสถานที่

HTML ที่มีอยู่อาจมีลักษณะดังนี้

<div id="search-results-area">
    <h3>Nearby Places:</h3>
    <ul id="manual-places-list">
        <!-- JavaScript would dynamically insert list items here -->
        <!-- Example of what JS might generate:
    <li class="place-entry" data-place-id="SOME_PLACE_ID_1">
      <img class="place-icon" src="icon_url_1.png" alt="Icon">
      <span class="place-name">Place Name One</span> -
      <span class="place-vicinity">123 Main St</span>
    </li>
    <li class="place-entry" data-place-id="SOME_PLACE_ID_2">
      <img class="place-icon" src="icon_url_2.png" alt="Icon">
      <span class="place-name">Place Name Two</span> -
      <span class="place-vicinity">456 Oak Ave</span>
    </li>
    -->
        <li class="loading-message">Loading places...</li>
    </ul>
</div>

องค์ประกอบการค้นหาสถานที่ติดตั้งใช้งานโดยใช้<gmp-place-search> คอมโพเนนต์ หากต้องการกำหนดค่าประเภทการค้นหา ให้ใส่คอมโพเนนต์การกำหนดค่าที่สล็อตไว้ต่อไปนี้อย่างน้อย 1 รายการไว้ภายใน

• <gmp-place-text-search-request> สำหรับการค้นหาข้อความ
• <gmp-place-nearby-search-request> สำหรับการค้นหาในบริเวณใกล้เคียง

หากต้องการกำหนดวิธีแสดงผลลัพธ์ คุณสามารถใช้<gmp-place-all-content> ชอร์ตคัต หรือระบุชุดคอมโพเนนต์การนำเสนอแต่ละรายการของคุณเอง คุณสามารถตั้งค่าแอตทริบิวต์หลักๆ เช่น selectable (เพื่ออนุญาตให้คลิกรายการ) และ orientation (สำหรับเลย์เอาต์แนวนอนหรือแนวตั้ง) ในคอมโพเนนต์ระดับบนสุดได้โดยตรง

ตัวอย่างการค้นหาในบริเวณใกล้เคียง

<gmp-place-search orientation="horizontal" selectable>
    <gmp-place-all-content> </gmp-place-all-content>
    <gmp-place-nearby-search-request></gmp-place-nearby-search-request>
</gmp-place-search>

ตัวอย่างการค้นหาข้อความ

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-all-content> </gmp-place-all-content>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

ปรับตรรกะ JavaScript

ใน JavaScript ให้รับการอ้างอิงไปยังคอมโพเนนต์ตัวควบคุมการค้นหาโดยใช้ document.querySelector() ซึ่งจะเป็นองค์ประกอบ <gmp-place-text-search-request> หรือ <gmp-place-nearby-search-request> ทั้งนี้ขึ้นอยู่กับการตั้งค่า

จากนั้นตั้งค่าพร็อพเพอร์ตี้ในตัวควบคุมนี้เพื่อกำหนดการค้นหา พร็อพเพอร์ตี้ที่จำเป็นจะขึ้นอยู่กับประเภทการค้นหาที่คุณดำเนินการ

สำหรับการค้นหาข้อความ (<gmp-place-text-search-request>) พร็อพเพอร์ตี้หลักคือ textQuery

const textSearchController = document.querySelector('gmp-place-text-search-request');
textSearchController.textQuery = 'museums in London';

สำหรับการค้นหาในบริเวณใกล้เคียง (<gmp-place-nearby-search-request>) คุณต้องกำหนด พื้นที่การค้นหาโดยใช้ locationRestriction จากนั้นคุณสามารถใช้ includedTypes เพื่อกรองสถานที่บางประเภทภายในพื้นที่นั้นได้

const nearbySearchController = document.querySelector('gmp-place-nearby-search-request');
nearbySearchController.locationRestriction = new google.maps.Circle({
    center: { lat: 51.5190, lng: -0.1347 },
    radius: 1000
});
nearbySearchController.includedTypes = ['restaurant'];

คอมโพเนนต์ระดับบนสุด <gmp-place-search> จะเริ่มการค้นหาใหม่โดยอัตโนมัติ ทันทีที่ตั้งค่าพร็อพเพอร์ตี้ที่จำเป็นของตัวควบคุม

• สำหรับการค้นหาข้อความ การค้นหาจะทำงานทันทีที่คุณกำหนดค่าให้กับ textQuery
• สำหรับการค้นหาในบริเวณใกล้เคียง การค้นหาจะทำงานหลังจากระบุ locationRestriction ที่ถูกต้อง

ติดตั้งใช้งานองค์ประกอบ Place Autocomplete แบบพื้นฐาน

สำหรับนักพัฒนาแอปที่ต้องการประสบการณ์การค้นหาโดยไม่มี UI ขององค์ประกอบการค้นหาสถานที่ องค์ประกอบการเติมข้อความอัตโนมัติของสถานที่แบบพื้นฐาน พร้อมให้บริการแล้ว

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

องค์ประกอบนี้จะไม่แสดงรายละเอียดใดๆ ด้วยตัวเองหรือให้ข้อมูลอื่นๆ ที่เข้าถึงได้แบบเป็นโปรแกรม

การติดตั้งใช้งานปัจจุบัน

ตรรกะที่มีอยู่อาจเกี่ยวข้องกับสิ่งต่อไปนี้

• การแสดงช่องป้อนข้อมูลข้อความในหน้าเว็บซึ่งเรียก Place Autocomplete ขณะที่ผู้ใช้พิมพ์และแสดงผลลัพธ์
• การใช้รหัสสถานที่ของสถานที่ที่ผู้ใช้เลือกเพื่อดึงข้อมูลเพิ่มเติม เช่น การใช้ Places API
• การแสดงรายละเอียดของสถานที่ที่เลือก

การย้ายข้อมูลไปยังองค์ประกอบ Place Autocomplete

แก้ไขโครงสร้าง HTML

ระบุและนำองค์ประกอบ HTML ที่คุณแนบวิดเจ็ตการเติมข้อความอัตโนมัติออก ซึ่งอาจใช้ช่องป้อนข้อมูล HTML มาตรฐาน

<input id="pac-input" type="text" placeholder="Search for a location" />

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

<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>

ปรับตรรกะ JavaScript

ตรรกะ JavaScript ของคุณอาจเกี่ยวข้องกับการสร้างวิดเจ็ตการเติมข้อความอัตโนมัติที่แนบกับองค์ประกอบ HTML input จากนั้นวิดเจ็ตนี้จะรอรับเหตุการณ์ place_changed ซึ่งจะทริกเกอร์การดำเนินการด้วยข้อมูลที่แสดงผล

ตัวอย่าง JavaScript ที่มีอยู่ที่จะนำออก

// Get the input element
const input = document.getElementById("pac-input");

// Create the Autocomplete widget instance
const autocomplete = new google.maps.places.Autocomplete(input, {
  fields: ["place_id", "geometry", "name"]
});

// Add a listener for the 'place_changed' event
autocomplete.addListener("place_changed", () => {
  // Your logic to get and display place information
  console.log(place.place_id);
});

ตรรกะ JavaScript ใหม่จะรับการอ้างอิงไปยังองค์ประกอบ Basic Place Autocomplete และรอรับเหตุการณ์ gmp-select

const placeAutocomplete = document.querySelector('gmp-basic-place-autocomplete');

placeAutocomplete.addEventListener('gmp-select', (event) => {
  console.log(event.place);
});

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

จัดการการปรับแต่ง

เคล็ดลับ: หากต้องการคำแนะนำโดยละเอียดเกี่ยวกับการปรับแต่งรูปลักษณ์ รวมถึงเครื่องมือจัดรูปแบบแบบสดและข้อกำหนดการระบุแหล่งที่มา โปรดดูเอกสารประกอบการจัดรูปแบบที่กำหนดเองของ Places UI Kit

การปรับแต่งองค์ประกอบรายละเอียดสถานที่

การวางแนว

องค์ประกอบรายละเอียดสถานที่สามารถแสดงผลได้ทั้งแนวตั้งและแนวนอน ใช้แอตทริบิวต์ orientation ใน gmp-place-details-compact เพื่อเลือกระหว่างแนวตั้งและแนวนอน ตัวอย่างเช่น

<gmp-place-details-compact orientation="vertical">

เลือกช่องที่จะแสดงผล

ใช้องค์ประกอบเนื้อหาเพื่อระบุเนื้อหาที่จะแสดงผลภายในองค์ประกอบรายละเอียดสถานที่ เช่น การยกเว้นองค์ประกอบเนื้อหา <gmp-place-type> จะหยุดองค์ประกอบรายละเอียดสถานที่จากการแสดงประเภทสถานที่ของสถานที่ที่เลือก ดูรายการองค์ประกอบเนื้อหาทั้งหมดได้ใน PlaceContentConfigElement เอกสารอ้างอิง

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

ตั้งค่าสไตล์ CSS

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

gmp-place-details-compact {
  --gmp-mat-color-surface: green;
}

ดูรายละเอียดเพิ่มเติมได้ในเอกสารอ้างอิงสำหรับ PlaceDetailsCompactElement

การปรับแต่งองค์ประกอบการค้นหาสถานที่

การวางแนว

องค์ประกอบการค้นหาสถานที่สามารถแสดงผลได้ทั้งแนวตั้งและแนวนอน ใช้แอตทริบิวต์ orientation ใน <gmp-place-search> เพื่อเลือกระหว่างแนวตั้งและแนวนอน ตัวอย่างเช่น

<gmp-place-search orientation="horizontal" selectable>

เลือกช่องที่จะแสดงผล

ใช้องค์ประกอบเนื้อหาเพื่อระบุเนื้อหาที่จะแสดงผลภายในองค์ประกอบการค้นหาสถานที่ คุณสามารถใช้องค์ประกอบ <gmp-place-all-content> เพื่อแสดงเนื้อหาทั้งหมด หรือใช้แท็ก HTML ที่เลือกเพื่อกำหนดค่าเนื้อหาที่แสดงผล

การใส่ <gmp-place-address> ไว้ใน <gmp-place-content-config> จะแสดงเฉพาะที่อยู่ของแต่ละสถานที่ เช่น

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-content-config>
    <gmp-place-address></gmp-place-address>
  </gmp-place-content-config>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

การปรับแต่งองค์ประกอบ Place Autocomplete แบบพื้นฐาน

ตั้งค่าสไตล์ CSS

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

gmp-basic-place-autocomplete {
  background-color: #d993e6;
}

ดูรายละเอียดเพิ่มเติมได้ในเอกสารอ้างอิง BasicPlaceAutocompleteElement

จัดการเหตุการณ์และข้อมูล

องค์ประกอบ Places UI Kit เป็นคอมโพเนนต์แบบโต้ตอบที่ช่วยให้คุณรอรับเหตุการณ์และดึงข้อมูลแบบเป็นโปรแกรมได้

รอรับเหตุการณ์

คุณสามารถเพิ่ม Listener เหตุการณ์ลงในองค์ประกอบเพื่อทริกเกอร์การดำเนินการตามการโต้ตอบของผู้ใช้หรือสถานะขององค์ประกอบ

เหตุการณ์การเลือก

• gmp-select: เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้ทำการเลือก
  • ในองค์ประกอบการค้นหาสถานที่ เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้คลิกสถานที่ในรายการผลลัพธ์
  • ในองค์ประกอบ Place Autocomplete แบบพื้นฐาน เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้คลิกการคาดการณ์ในรายการแบบเลื่อนลง

เหตุการณ์ทั่วไป

องค์ประกอบการค้นหาสถานที่ องค์ประกอบรายละเอียดสถานที่ และองค์ประกอบ Place Autocomplete แบบพื้นฐานรองรับเหตุการณ์ต่อไปนี้

• gmp-load: เริ่มทำงานเมื่อองค์ประกอบและเนื้อหาโหลดและแสดงผลเสร็จแล้ว
• gmp-requesterror: เริ่มทำงานเมื่อคำขอไปยังเซิร์ฟเวอร์ล้มเหลว เช่น เนื่องจากคีย์ API ไม่ถูกต้อง

เข้าถึงข้อมูลองค์ประกอบแบบเป็นโปรแกรม

คุณสามารถดึงข้อมูลที่เฉพาะเจาะจงจากองค์ประกอบแบบเป็นโปรแกรมได้หลังจากที่โต้ตอบกับองค์ประกอบหรือโหลดองค์ประกอบแล้ว

• สำหรับองค์ประกอบการค้นหาสถานที่และองค์ประกอบรายละเอียดสถานที่ คุณสามารถดึงข้อมูลต่อไปนี้
  • รหัสสถานที่
  • สถานที่ (ละติจูดและลองจิจูด)
  • วิวพอร์ต
• สำหรับองค์ประกอบ Basic Place Autocomplete คุณสามารถดึงข้อมูลต่อไปนี้
  • รหัสสถานที่

ข้อมูลอื่นๆ ทั้งหมดที่อยู่ในองค์ประกอบจะไม่สามารถเข้าถึงได้แบบเป็นโปรแกรม

ดูตัวอย่างโดยละเอียดเพิ่มเติมได้ในเอกสารประกอบแต่ละรายการสำหรับองค์ประกอบการค้นหาสถานที่ องค์ประกอบรายละเอียดสถานที่ และองค์ประกอบ Place Autocomplete แบบพื้นฐาน

การทดสอบและการปรับแต่ง

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

องค์ประกอบรายละเอียดสถานที่

สำหรับองค์ประกอบรายละเอียดสถานที่ ให้เริ่มด้วยการตรวจสอบว่ารายละเอียดแสดงอย่างถูกต้องสำหรับสถานที่ต่างๆ ทดสอบโดยส่งรหัสสถานที่ต่างๆ ไปยัง พร็อพเพอร์ตี้ .place ขององค์ประกอบ <gmp-place-details-place-request> ใช้รหัสที่แสดงถึงประเภทสถานประกอบการต่างๆ (ธุรกิจที่มีข้อมูลแบบสมบูรณ์ จุดที่น่าสนใจ ที่อยู่พื้นฐาน) และสถานที่ในภูมิภาคหรือภาษาต่างๆ ให้ความสำคัญกับการจัดรูปแบบ เลย์เอาต์ และการแสดงเนื้อหา

องค์ประกอบการค้นหาสถานที่

หากคุณติดตั้งใช้งานองค์ประกอบการค้นหาสถานที่ ให้ตรวจสอบการแสดงผลและลักษณะการทำงานในสถานการณ์การค้นหาต่างๆ

• สำหรับการค้นหาข้อความ ให้ทดสอบโดยตั้งค่าพร็อพเพอร์ตี้ textQuery ในองค์ประกอบ <gmp-place-text-search-request> ด้วยอินพุตต่างๆ ได้แก่ คำค้นหาแบบกว้าง ที่อยู่ที่เฉพาะเจาะจง และคำค้นหาที่มีความเอนเอียงของสถานที่
• สำหรับการค้นหาในบริเวณใกล้เคียง ให้ทดสอบโดยตั้งค่า locationRestriction และ includedTypes พร็อพเพอร์ตี้ใน <gmp-place-nearby-search-request> องค์ประกอบ ใช้ขนาดสถานที่และตัวกรองประเภทต่างๆ

ยืนยันว่ารายการแสดงผลลัพธ์ที่เกี่ยวข้องและเหตุการณ์ gmp-select เริ่มทำงานอย่างถูกต้องเมื่อเลือก

องค์ประกอบ Place Autocomplete แบบพื้นฐาน

สำหรับองค์ประกอบ Place Autocomplete แบบพื้นฐาน ให้มุ่งเน้นการทดสอบไปที่การโต้ตอบของผู้ใช้และข้อมูลที่ส่งผ่านเหตุการณ์การเลือก ยืนยันว่าเหตุการณ์ gmp-select เริ่มทำงานอย่างน่าเชื่อถือเมื่อผู้ใช้คลิกการคาดการณ์ ตรวจสอบว่าออบเจ็กต์ event.place ในตัวจัดการเหตุการณ์มีรหัสสถานที่ที่ถูกต้อง

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

การจัดการข้อผิดพลาด

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