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

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

โดยมีองค์ประกอบ 2 รายการให้เลือกดังนี้

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

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

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);
}

ตรรกะใหม่

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

ดึงข้อมูลรหัสสถานที่หรือออบเจ็กต์สถานที่
รับข้อมูลอ้างอิงไปยังองค์ประกอบ <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 ของ 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> หากต้องการกำหนดค่าประเภทการค้นหา ให้ใส่คอมโพเนนต์การกำหนดค่าแบบมีช่องอย่างใดอย่างหนึ่งต่อไปนี้ไว้ด้านใน

<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 Element พื้นฐาน

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

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

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

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

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

แสดงผลช่องป้อนข้อความในหน้าเว็บที่เรียกใช้ Place Autocomplete ขณะที่ผู้ใช้พิมพ์เพื่อแสดงผลลัพธ์
ใช้รหัสสถานที่ของสถานที่ที่ผู้ใช้เลือกเพื่อดึงรายละเอียดเพิ่มเติม เช่น การใช้ Place Details 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 ใหม่จะได้รับการอ้างอิงไปยังองค์ประกอบการเติมข้อมูลสถานที่อัตโนมัติพื้นฐาน และฟังเหตุการณ์ gmp-select ดังนี้

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

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

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

การปรับแต่งแฮนเดิล

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

การวางแนว

องค์ประกอบรายละเอียดสถานที่สามารถแสดงผลได้ทั้งในแนวนอนและแนวตั้ง ใช้แอตทริบิวต์ 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 ไม่ถูกต้อง

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

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

สำหรับองค์ประกอบการค้นหาสถานที่และองค์ประกอบรายละเอียดสถานที่ คุณสามารถดึงข้อมูลต่อไปนี้ได้
- รหัสสถานที่
- สถานที่ (ละติจูดและลองจิจูด)
- วิวพอร์ต
สำหรับองค์ประกอบ 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 เสียหายหรือสร้างความสับสน

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

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

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

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

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

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

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

ปรับตรรกะ JavaScript

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

ตรรกะใหม่

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

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

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

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

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

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

ปรับตรรกะ JavaScript

ใช้ Place Autocomplete Element พื้นฐาน

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

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

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

ปรับตรรกะ JavaScript

การปรับแต่งแฮนเดิล

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

การวางแนว

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

ตั้งค่ารูปแบบ CSS

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

การวางแนว

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

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

ตั้งค่ารูปแบบ CSS

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

ฟังเหตุการณ์

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

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

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

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